We’ve been spending some time recently talking about how we use them around GDS, swapping tips and sharing process. In addition to this we asked @umarhansa, a contributor to Chrome’s developer tools documentation, to show us the most useful features.
We thought it was worth sharing a few of the best learnings. A lot of the tips below are quite new so it’s best to try them in Canary, the version of Chrome used for testing new features.
Search all files used by a page
When viewing files in the source panel you can get a global search of all files used by pressing escape and selecting the 'search' tab from the panel that pops up.
If you right-click in an file you’ve been working in and select 'local modifications' you will see a full history of all changes made.
Every colour value in the styles for an inspected element has a swatch of the actual colour. If you click on the swatch you’ll get a popup for choosing colours. If you then run the cursor over the web page you'll get a colour picker to choosing colours from the page.
Saving changes to files
One common workflow we have is to use developer tools to make changes to pages in-browser, enabling us to test designs or production code on live pages. One of the frustrations often mentioned was that there was no easy way to save the changes made.
A few recent additions to the tools provide some remedy to this.
For a start, any files you edit can now be saved to your machine by right-clicking in any file and selecting ‘Save as’.
Originally introduced to us by my colleague @_ralph, workspaces provides a more comprehensive solution.
Using workspaces you can add a folder on your machine to those included by developer tools (shown in the right-hand panel of the ‘sources’ tab). Once done, you can map files in your folder to those used by the page, allowing all changes to be saved in a way you can easily come back to later.
The responsive design view, similar to that found in Firefox, allows simulation of the most popular devices. It’s not the same as a real device because they don’t use the same rendering engine or run on the same hardware, but the following features do make it useful for testing:
- preset screen sizes for most common devices
- touch simulation
- device pixel simulation & zoom
- user agent spoofing
- simulating different network speeds
Slides for Umar’s session, showing the above tips and more can be found on github: http://umaar.github.io/devtools-talk-aug-2014/assets/player/KeynoteDHTMLPlayer.html.
If this sounds like a good place to work, take a look at Working for GDS - we're usually in search of talented people to come and join the team.