Besides its function as a great day-to-day Internet browser, Google Chrome is also a great tool for web development through the DevTools.
The DevTools is constantly updated with new versions. So, there might be a few features and DevTools that you may have missed out on along the way. Therefore, here are 7 of the newest Google Chrome features you should know.
Recommended Reading: How To Customize Google Chrome DevTools Theme
Getting Started – Chrome DevTools Experiment
Chrome has some experimental cool features, which are hidden or disabled by default. To activate these experimental features go to
chrome://flags/#enable-devtools-experiments through the Chrome address bar and enable the DevTool Experiment option, and restart Chrome.
After restarting, launch the DevTools and click on the gear icon on the top right of the DevTools panel, and you should see “Experiment” tab on the left sidebar. Check whichever features you want to activate.
1. Improved Mobile Device Emulator
Today having a website that is optimized for mobile devices is a must. With Chrome, you can debug websites in mobile mode through the Mobile Emulator feature, which has been totally revamped and added with a bunch of new capablities.
To enable the Mobile Emulator, launch the DevTools and click the Mobile icon next to the loop/search icon, as shown in the following screenshot. As you can see, above the Emulator is now equipped with rulers so you can see exactly the viewport size the website is in.
2. Multiple Cursors Selections
Do yo want to edit multiple lines together in a source file the way you can with Sublime Text? Chrome now supports multipe cursors and selection in the DevTools. Use Ctrl + Click or Cmd + Click to select multiple lines at once.
3. Throttling Network Connection
You can now also test your website’s response and performance on various connections through the DevTools. In the DevTools, press Esc to launch Console Drawer then select Emulation. On the Network tab, select the speed type to throttling your network connection and see how your website performs within the selected speed.
4. Offline Mode
Google Chrome now is equipped with Offline Mode, which allows you to open websites while you are actually offline. If you are developing web application which aims to work even while users are offline, this feature would be really helpful. To enable the Offline Mode, head to
chrome://flags/#enable-offline-mode via the address bar and enable the “Enable Offline Cache Mode” option.
Don’t forget to restart Chrome for the effect to take place.
5. Drag and Drop HTML Into the Editor
Sometimes you need to copy a HTML element to your editor. Instead of manually copying and pasting it on your text editor, you can simply drag the DOM and drop into the editor.
Currently, you can only drag one element, and its child elements won’t follow. Hopefully this will be improved on in the next update.
6. Auditing CSS
You can now also audit your CSS, such as inspecting useless style rules which are not being used on the web page. To do so, go to the “Audits” tab and click “Run” to start auditing the CSS. You will see a list of classes/selectors that are not used on the current page, as follows.
7. Adding SourceMap
To do this, make sure that you’re in the source panel then open a file. After that, right-click and select Add Source Map. to add the