I've been jumping back and forth between Sketch, Atom, and Google Chrome a lot lately. As a result, I've gotten very friendly with Chrome DevTools. Any bit of time saved helps, and using the DevTools expedites my workflow. Below, I'm going to share with you some of my favorite tools within the panels of Chrome DevTools.
1. Device Mode
When working on responsive websites or mobiles apps in Cordova, PhoneGap, etc., device mode is a no brainer. I used to do mock ups at multiple screen resolutions and use software to screencast them to devices. There are a couple of pitfalls to this process – the main one being wasted time, followed by never being able to mock up enough screens to account for even a quarter of the screen resolutions out there. Getting one mock up into the code (or designing in the browser from the get go) and tweaking it from there has become a more efficient method for me. While device mode doesn't offer previews for every screen resolution possible, it does offer quite a varied few (Apple, Android and Windows devices of multiple resolutions).
In order to use device mode, click on the mobile phone icon in the top left corner of the inspector. From there, you can switch between devices, orientations, and manually change the resolution of the view. You can also add custom devices in the settings panel.
### 2. Edit as HTML
It's annoying to have to click into every element in the elements tab. Instead, right click an element, select "Edit as HTML," and edit just as you would in your text editor. You can then copy and paste your edited code into your text editor.
### 3. Moving and Deleting Elements
Sometimes you want to see how this part of the UI will look here, or how that part of the UI will look there. Or maybe you want to see what your layout looks like without an entire div. DevTools makes this easy (albeit a bit hidden). Clicking on an element will cause an ellipsis to appear to the left of the element. Click and drag up or down to move the element, or click and select "Delete Element" to delete it. You can always undo your actions with a CMD + Z / CTRL + Z.
### 4. Color Picker
Instead of jumping back to Sketch (or your design program of choice) to grab a color that's already in the code, select an element in the elements tab, then find its color in the style tab. Click on the little square of color and proceed to use the eyedropper to grab any color on the screen. Time saved? Minutes (maybe seconds)... but it adds up!
### 5. Audits
Are you using all of the code you've written and/or imported? I know I oftentimes have code that is just sitting there doing a whole bunch of nothing, which leads to slower load times. To run an audit, navigate to the audits tab (which may be hidden under a dropdown menu, depending on the size of your screen). Choose Network Utilization and/or Web Page Performance (they should both be selected by default) and click "Run." The output will be suggestions on how to optimize your code, with a red dot next to things that should get your attention first. The number in parentheses tells you how many instances of the suggestion exist.
In the example I show in the video below, I see that there are 2208 CSS rules not being used. Clicking on the carrot reveals all of the unused CSS rules. If this excess CSS is causing performance issues, I can then go into my CSS file and delete these rules.
### 6. Adding a Local Folder to WorkspaceAdding a local folder to your workspace allows you to make changes to your files without leaving DevTools. In order to do this, navigate to the sources tab, right click in the left hand panel and select "Add Folder to Workspace." You can then browse your local folders and select the one you want to add. Once it is added, you can navigate to the file(s) you want to edit and edit them directly within DevTools. The video below shows a change being made and saved within DevTools, and automatically being reflected within Atom.
Do you have any favorites in Chrome DevTools? Perhaps you like to use another browser's developer tools. We'd love to hear about the tools you use and why they're awesome.
