Archive results for: Dev Tools

Chrome DevTools Timeline

Chrome DevTools Timeline panel provides an overview of all the activity in an application as it runs: fro example,  processing DOM elements, rendering page layouts or painting elements to the screen. It can break this information down in three different ways: by events, Frames or Memory usage.

The Timeline won’t display any information by default, so to begin a recording session, you need to open your app and click on the grey circle at the bottom of the pane (or just use the Cmd/Ctrl + E shortcut). The record button will now turn red, and the Timeline will begin to capture information.

Complete a few actions inside your app and after a few seconds, click the button again to stop recording.

chrome_tool_timeline
Read more ›


IE 11 New Dev Tool

IE11

IE11, available for Windows 7 and 8.x, offers a new set of developer tools. Some of the new features includes:

New DOM Inspector/style feature:

  • Improved highlighting of selected elements.
  • New breadcrumb navigation shows the DOM path to the current element, allowing rapid navigation up and down the path hierarchy.
  • You can now change the order of the DOM elements by dragging and dropping.
  • Trace is a new feature that provides a concise summary list of all the properties applied from your stylesheets.
  • The ability to filter computed styles.
  • A new Events panel that allows us to Inspect events attached to DOM elements.

Read more ›


Browser Development Tools

Browser developer tools allow us to inspect, edit, debug, log and profile our HTML, CSS and JavaScript, and include an exhaustive range of features and functionality.

You can improve your development workflow by getting to know how these tools work in every browser.

Chrome developer tools have had the fullest feature set for some time now. Each new release tends to add more new and exciting features such as workflows, snippets, canvas inspection and source-mapping support. Read more ›