Front End-"learning experience"-using tools to boost your productivity (chrome)

Next is another big artifact of front-end development, the Chrome browser.

Chrome browser can debug Web page style in real time, breakpoint view JS code, view request parameters, observe animation frame, and make responsive adjustment. No need to install plugins. Of course the fire bug is also a very good debugging plugin. I chose chrome for my habits, and I'm here to share my experience with you.

The first is to examine the interface of the element, you can see the left side is the HTML document, the right is the style sheet, if you want to see a dome element, you need to select the magnifying glass button and then go to the interface selection, you can visually see the size of the element, the right style sheet can also show its style.

Next, we can directly re-edit the right column, so that you can visually see the effect on the page, but remember not to click Refresh, because it is only temporary, and not saved.

After editing the effect will immediately appear, such as adjusting the margin 100px, then this element is moving down and to the left 100 pixels, then we click the rightmost style sheet connection

You can see the changed numbers in this time, we can select this style sheet, replace to the server can be changed before, it is suitable for small-scale later style adjustment, and the right side of the edit bar can be selected by up and down to fine tune. is not very convenient.

Next we look at Resourse

This column is the site's resources, as well as the cache, including application storage and cookies, can easily see the relevant resources of the site, if you want to borrow the resources of other sites can also get from here.

Network, this is a very important adjustment bar, for the development of the server personnel, it is very necessary to clearly send out the data and the correctness of receiving back data.

For example, we send an AJAX request to the Web (for reference only), then we will show the Web in this list, then click to see Header,preview, Response and other columns, the corresponding request, Response Preview and response results. The hearder contains the request parameters, the request path, and response reflects the results from the server.

If you do not understand what the HTTP protocol specifically corresponds to, you can see it from here. (I'll introduce you to the details later.)

Sourse

Here can save the front-end novice debugging nightmare, when you request a website, it will show the site of the script JS, for example, we want to debug a function ClickMe, in the script to find this function, on the left click the mouse can hit the last endpoint, OK, do not turn off the interface, refresh the interface, Click on this function to go into this function. See the detailed data for each step.

Console

This should be the most commonly used column. In addition to looking at the Console.log output you write, it's another magical use to view the browser's BOM object, such as the way I want to view the window, where you can enter a smart boot. You want to know which function can be found here.

Also give everyone a piece of code (!) ( ~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]

Everyone in this console input below, you can see the magic effect Oh. To counter the contempt of JS other developers.

Front End-"learning experience"-using tools to boost your productivity (chrome)