Google Chrome Features You Should Know

The DevTools is constantly updated with new versions.Here some newest Google Chrome features you should know.

Getting Started – Chrome DevTools Experiment

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 capabilities.

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

With Source Map, you can see the unbuilt or the uncompiled version of CSS or JavaScript (JS). This feature is particularly useful for developers who compose styles or JS using Pre-processors like Sass, LESS, or CoffeeScript. With the Source Map enabled, you can find location of code on generated JS or CSS on a certain line and column number. The latest version of Chrome allows you to add Source Map manually.

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 .map file.