Recently, Google Chrome Developer Tools received a lot of improvements that will hopefully improve your experience include:
- Network aspects of your web page are now inspected in Network panel for more info at a single glance. You can sort and clear data, preserve log info upon navigation and even export network data into HAR format.
- All the timing info about your resource loads now comes from the network stack, not WebKit, so timing info now adequately represents raw network timing. You can see detailed timing for different phases of the loading by hovering over the log entry.
- Google now push raw HTTP headers and status messages into CDTs. As a result, you now see precisely what browser received from the server and not just how the rendering engine interpreted that info.
- Similarly to old Resources panel, you can see syntax-highlighted resource contents.
- Also made CSS editing a whole lot easier. In particular, you'll now find separate fields for property names and values instead of a single field for both. As you type, you'll see suggestions of available keywords for property values.
- Similar to the network panel, the CSS sidebar now shows the raw info that the browser gets from server - not the rendering engine's interpretation of the info. As a result, you can use CDT to see CSS properties that're not recognized by WebKit (e.g., engine-specific or simply erroneous properties). This finally puts an end to the nightmare of disappearing invalid properties.
For a more complete reference on working with CDTs, check out new home page. The CSS improvements are described in WebKit blog post. And for even more tips on how to use CDT, watch the new video below:
More Info: Chrome Developer Tools
[tags]developer tools,chrome developer tools[/tags]