GridTips: 7 New Google Chrome Features You Should Know

quinta-feira, 9 de outubro de 2014

7 New Google Chrome Features You Should Know

Besides a duty as a good day-to-day Internet browser, Google Chrome is also a good apparatus for web development by a DevTools.

The DevTools is constantly updated with new versions. So, there competence be a few facilities and DevTools that we competence have missed out on along a way. Therefore, here are 7 of a newest Google Chrome facilities we should know.

Recommended Reading: How To Customize Google Chrome DevTools Theme

Getting Started – Chrome DevTools Experiment

Chrome has some initial cold features, that are dark or infirm by default. To activate these initial facilities go to chrome://flags/#enable-devtools-experiments by a Chrome residence bar and enable a DevTool Experiment option, and restart Chrome.

After restarting, launch a DevTools and click on a rigging idol on a tip right of a DevTools panel, and we should see “Experiment” add-on on a left sidebar. Check whichever facilities we wish to activate.

1. Improved Mobile Device Emulator

Today carrying a website that is optimized for mobile inclination is a must. With Chrome, we can debug websites in mobile mode by a Mobile Emulator feature, that has been totally revamped and combined with a garland of new capablities.

To capacitate a Mobile Emulator, launch a DevTools and click a Mobile idol subsequent to a loop/search icon, as shown in a following screenshot. As we can see, above a Emulator is now versed with rulers so we can see accurately a viewport distance a website is in.

2. Multiple Cursors Selections

Do yo wish to revise mixed lines together in a source file a approach we can with Sublime Text? Chrome now supports multipe cursors and preference in a DevTools. Use Ctrl + Click or Cmd + Click to name mixed lines during once.

3. Throttling Network Connection

You can now also test your website’s response and opening on several connections by a DevTools. In a DevTools, press Esc to launch Console Drawer afterwards name Emulation. On a Network tab, name a speed form to throttling your network tie and see how your website performs within a comparison speed.

4. Offline Mode

Google Chrome now is versed with Offline Mode, that allows we to open websites while we are indeed offline. If we are building web focus that aims to work even while users are offline, this underline would be unequivocally helpful. To capacitate a Offline Mode, conduct to chrome://flags/#enable-offline-mode around a residence bar and capacitate a “Enable Offline Cache Mode” option.

Don’t forget to restart Chrome for a outcome to take place.

5. Drag and Drop HTML Into a Editor

Sometimes we need to duplicate a HTML component to your editor. Instead of manually duplicating and pasting it on your calm editor, we can simply drag a DOM and dump into a editor.

Currently, we can usually drag one element, and a child elements won’t follow. Hopefully this will be softened on in a subsequent update.

6. Auditing CSS

You can now also review your CSS, such as inspecting invalid character rules that are not being used on a web page. To do so, go to a “Audits” add-on and click “Run” to start auditing a CSS. You will see a list of classes/selectors that are not used on a stream page, as follows.

7. Adding SourceMap

With Source Map, we can see a unbuilt or a uncompiled chronicle of CSS or JavaScript (JS). This underline is particularly useful for developers who harmonise styles or JS regulating Pre-processors like Sass, LESS, or CoffeeScript. With a Source Map enabled, we can find plcae of formula on generated JS or CSS on a certain line and mainstay number. The latest chronicle of Chrome allows we to supplement Source Map manually.

To do this, make certain that you’re in a source row afterwards open a file. After that, right-click and name Add Source Map. to supplement a .map file.