Chrome usage tips (months of experience)

Read Catalogue

• How to use Google search most easily?
• Chrome Utility Plugin:
• The Chrome debugging tool describes:
• Quickly switch files
• Searching in the source code
• Quickly jump to a specified line in the source code
• Use multiple inserts to select
• Device mode
• Format the messy JS source code
• Color Picker
• Change the color format
• Force change of element state (easy to see the style of elements in different states)
• Use Chrome to view and edit local files
• Select the next occurrence
• Visualize the DOM shadow
• Kinky Technology
• Chrome Dev Developer Options
• Summarize

Switch to Chrome, not just because of the richness of its plugins, but because of its responsiveness to other browsers. Then I'm going to write some tips.

Back to the top how do I most easily use Google search?

1. Download the Hosts file: Https://pan.baidu.com/s/1c2r8jV6 extract password: laod.org (thanks to old D's great God's contribution to hosts!! ）

2, and then the hosts (no suffix files) to swap out the original system Hosts file, you can use Google search.

• Windows system hosts is located in C:\Windows\System32\drivers\etc\hosts

• Android (Android) system hosts located in/system/etc/hosts

• Mac (Macintosh) system hosts are located in the same/etc/hosts as Linux

• IPhone (IOS) system hosts are located in/etc/hosts like Linux mac

• The Linux system hosts are located in/etc/hosts

Android can use the root Explorer app to complete the replacement.

3. Then you will be as happy as I can visit Facebook,gmail, Google academic and other websites without a penny, as well as visit the Chrome store.

Note Enter HTTPS instead of http,www.google.com to add a. HK

Go back to the top Chrome utility plugin:

A few months of recommendations:

Infinity (required): A well-pleasing background, and can customize the icon. (Mouse wheel can page)

AdBlock (required): By now, I've blocked tens of thousands of ads.

Video ad Terminator: In the case of no membership, basically all the video is not advertising, you know this acid cool?

Lasspass: This is also a weapon, but it takes a little time to learn to use, the advantage is that all passwords are not to remember, such as the blog Park so troublesome password (hehe)

Google Translate: One-click Translation (for English is not particularly good for me to use is also acid cool)

In addition, for the front-end dedicated some plug-ins recommended:

Page Ruler: Sharp Weapon (Measure the size of any part of the page)

Cssviewer: OK (the plug is not needed for high level)

Window Resizer: This plugin is not required for Chrome console debugging

Eye Dropper: Ditto

Back to top Chrome debugging tool Introduction:

Let's start with a brief introduction to the various tools of the Chrome debugging tool.

Element

Elements plate you can see the entire page of the DOM structure. You can edit HTML here, view element css, find elements, and so on.

Console

The console should be familiar, right? Often think of writing less '} ' and reporting grammatical errors. Of course, its function is much more than that. Click here to see more

Sources

Sources is all the resources, you can see the page loaded resources, pictures, CSS,JS, etc., they will be categorized according to the source of resources.

Network

In this section, you can view all the resource responses, response time, browser wait time, status code, MINE Type, resource size, etc. loaded by the page.

Timeline

Compared to the previous tool, Timeline is a lot more advanced. It allows you to view the browser's rendering process. Parse code, layout, draw, merge render layer. Learn more and view the previous article browser rendering process

Profiles

The Profiles tool is primarily used to detect CPU usage and stack requests for memory.

Resources

The Resources tool displays the resource, which, unlike sources, classifies the document type. And it can view, add, delete, modify page localstorage,sessionstorage,cookies and so on.

The following content draws on this blog post

Go back to the top to quickly switch files

Press Ctrl+p (Cmd+p on Mac) to quickly search for and open files for your project.

Back to top search in source code

We all know that if you want to view the source code in elements, just navigate to the elements panel and press ctrl+f.

Go back to the top quickly jump to a specified line in the source code

After you open a file in the Sources tab, press CTRL + G, (or CMD + L for Mac), and then enter the line number, and the chrome console jumps to the line where you entered the line number.

Or ctrl+p after entering: line number;

Back to top use multiple inserts to select

When editing a file, you can press and hold CTRL at the point where you want to edit the mouse, you can set multiple caret, so you can edit in more than one place at a time

Back to top device mode

Back to the top of the format of the messy JS source code

Sometimes see the compressed good mess of JS, do not know where to start to see. The chrome console has built-in code functionality that can return a minimized and easily readable code. The Pretty Print button is in the lower-left corner of the Sources tab.

Back to top Color picker

When you select a color attribute in the style editor, you can click on the color preview and a color picker will pop up. When the selector is turned on, if you stay on the page, the mouse pointer will turn into a magnifying glass, allowing you to choose the color of pixel accuracy.

Back to top change color format

It is believed that front-end developers know that colors are represented in many ways, such as RGB,HSL, hexadecimal notation, and so on. Looking at this diagram below, I'm sure you'll admire the power of chrome, and even the details are doing so well.

The color Preview feature uses the shortcut key SHIFT + Click to toggle the formatting of colors back and forth in Rgba, HSL, and hexadecimal

Back to top force change element state (easy to see the style of elements in different states)

The chrome console has a feature that simulates the state of the CSS, such as the hover and focus of the elements, which can easily change the style of the element. This feature can be used in the CSS editor to see the style of elements in different states, which I believe is very useful for front-end enthusiasts who mimic the interface of others.

Back to top use Chrome to view and edit local files

In fact, we can use Chrome to view the local files, just drag the relevant directory to the Chrome browser.

Back to Top Select the next occurrence

When editing a file under the Sources tab, press CTRL + D (CMD + D), and the next match for the currently selected word will also be selected, enabling you to edit them at the same time.

Back to the top of the visual Dom shadow

Back to the top of the kinky technique

The hidden refresh button, with the developer tool Open, long press the Refresh button in the upper-left corner and a variety of loading options appear.

Add folder to Workspace, under the source panel, right-click the Add Folder

The snippets under source lets you create, store, and run these snippets in the source panel by allowing you to save small pieces of script, bookmarks, or code that you use frequently when you debug in a browser, and you can use snippets.

Save, fallback

You can save the changes, the files under the source panel are modifiable and support version fallback. Open a file, edit it, save it. Right-click on the local modifications, you can see the save record, you can choose fallback, to a point in time. You can also save as ~

Back to top Chrome dev developer options

Chrome Dev Developer option, browser into Chrome://flags, you will see many browsers with many hidden features, enabling the Developer tools experiment.

Then enter the settings again and you will see a lot of new developer options added.

Open the layer panel to let you see the composite layer in the page. (Very useful when looking for page reasons)

Back to top of the summary

The above content many friends should not know, so take out here to share. Chorme is really strong, so it's not just a little bit of time to save it!

Chrome usage tips (months of experience)