7 New Google Chrome Features You Should Know

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> Besides its function as a great day-to-day Internet browser, <strong>Google Chrome is also a great tool for web development</strong> through the DevTools.</div> <div style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> 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 <strong>7 of the newest Google Chrome features you should know</strong>.<br /><img alt="" class="" data-mce-src="http://media02.hongkiat.com/chrome-features/auditing_css.jpg" src="http://media02.hongkiat.com/chrome-features/auditing_css.jpg" width="100%" /><span id="more-53"></span></div> <div class="recommended_top" style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> <strong>Recommended Reading:</strong> <a data-mce-href="http://www.hongkiat.com/blog/chrome-devtools-theme/" href="http://www.hongkiat.com/blog/chrome-devtools-theme/">How To Customize Google Chrome DevTools Theme</a></div> <h3 style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px;"> Getting Started – Chrome DevTools Experiment</h3> <div style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> Chrome has some experimental cool features, which are hidden or disabled by default. To activate these experimental features go to<code>chrome://flags/#enable-devtools-experiments</code> through the Chrome address bar and <strong>enable</strong> the DevTool Experiment option, and <strong>restart Chrome</strong>.</div> <div style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> 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.</div> <div class="entry-image" style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> <img alt="" class="" data-mce-src="http://media02.hongkiat.com/chrome-features/activate_devtools_experimants.jpg" src="http://media02.hongkiat.com/chrome-features/activate_devtools_experimants.jpg" width="100%" /></div> <h3 style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px;"> 1. Improved Mobile Device Emulator</h3> <div style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> Today having a website that is optimized for mobile devices is a must. With Chrome, you can debug websites in mobile mode through the <strong>Mobile Emulator feature</strong>, which has been totally revamped and added with a bunch of new capablities.</div> <div class="entry-image" style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> <img alt="" class="" data-mce-src="http://media02.hongkiat.com/chrome-features/mobile_emulation_on_canary.jpg" src="http://media02.hongkiat.com/chrome-features/mobile_emulation_on_canary.jpg" width="100%" /></div> <div style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> 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 <strong>now equipped with rulers</strong> so you can see exactly the viewport size the website is in.</div> <h3 style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px;"> 2. Multiple Cursors Selections</h3> <div style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> Do yo want to<strong> edit multiple lines together</strong> <strong>in a source file</strong> the way you can with Sublime Text? Chrome now supports multipe cursors and selection in the DevTools. Use <span class="key">Ctrl</span> +<span class="key">Click</span> or <span class="key">Cmd</span> + <span class="key">Click</span> to select multiple lines at once.</div> <div class="entry-image" style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> <img alt="" class="" data-mce-src="http://media02.hongkiat.com/chrome-features/multi_selection.jpg" src="http://media02.hongkiat.com/chrome-features/multi_selection.jpg" width="100%" /></div> <h3 style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px;"> 3. Throttling Network Connection</h3> <div style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> You can now also <strong>test your website’s response and performance on various connections</strong> through the DevTools. In the DevTools, press <span class="key">Esc</span> 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.</div> <div class="entry-image" style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> <img alt="" class="" data-mce-src="http://media02.hongkiat.com/chrome-features/throttling.jpg" src="http://media02.hongkiat.com/chrome-features/throttling.jpg" width="100%" /></div> <h3 style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px;"> 4. Offline Mode</h3> <div style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> 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 <code>chrome://flags/#enable-offline-mode</code> via the address bar and enable the “Enable Offline Cache Mode” option.</div> <div class="entry-image" style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> <img alt="" class="" data-mce-src="http://media02.hongkiat.com/chrome-features/enable_offline_cache_mode.jpg" src="http://media02.hongkiat.com/chrome-features/enable_offline_cache_mode.jpg" width="100%" /></div> <div style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> Don’t forget to restart Chrome for the effect to take place.</div> <h3 style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px;"> 5. Drag And Drop HTML Into The Editor</h3> <div style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> 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<strong> drag the DOM and drop into the editor</strong>.</div> <div class="entry-image" style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> <img alt="" class="" data-mce-src="http://media02.hongkiat.com/chrome-features/drag_element_to_editor.gif" src="http://media02.hongkiat.com/chrome-features/drag_element_to_editor.gif" width="100%" /></div> <div style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> Currently, you can only drag one element, and its child elements won’t follow. Hopefully this will be improved on in the next update.</div> <h3 style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px;"> 6. Auditing CSS</h3> <div style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> You can now also audit your CSS, such as <strong>inspecting useless style rules</strong> 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.</div> <div class="entry-image" style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> <img alt="" class="" data-mce-src="http://media02.hongkiat.com/chrome-features/auditing_css.jpg" src="http://media02.hongkiat.com/chrome-features/auditing_css.jpg" width="100%" /></div> <h3 style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px;"> 7. Adding SourceMap</h3> <div style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> With Source Map, you can see the <em>unbuilt</em> or the <em>uncompiled</em> version of CSS or JavaScript (JS). This feature is <strong>particularly useful for developers who compose styles or JS using Pre-processors</strong> 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.</div> <div style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> To do this, make sure that you’re in the source panel then open a file. After that, right-click and select <strong>Add Source Map.</strong> to add the <code>.map</code> file.</div> <div class="entry-image" style="color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"> <img alt="" class="pinit-hover" data-mce-src="http://media02.hongkiat.com/chrome-features/add_source_map_1.jpg" src="http://media02.hongkiat.com/chrome-features/add_source_map_1.jpg" width="100%" /></div> </div>

7 New Google Chrome Features You Should Know

Besides its function as a great day-to-day Internet browser,  Google Chrome is also a great tool for web development  through the DevTools...

Read more »