Chrome tips to keep track of some of the previously unfamiliar

Chrome doesn't know how many years it's been, but there are some tricks that are unfamiliar, documenting useful and unfamiliar

How to view the binding events of the DOM (view the binding events of jquery)

What is the type option for the new version of network?

Find the necessary resources in the sources, find a function in the JS file

Format JS, (can also help you format your local JS)

Breakpoint, to Dom Breakpoint, XHR breakpoint, exception breakpoint

Some of the problems encountered

How to view the binding events of the DOM (view the binding events of jquery)

Looking at the binding events of the DOM, this is a very necessary skill. Chrome support is good, too.

As shown, check DOM, Listenersbody in event listeners

Here's the problem.

Listenersbody is not completely displayed, how to do?

In Listenersbody this line, click the right mouse button, will come out of the box store as global variable

Click on the store as global variable and the whole function will be displayed in the console.

Here comes the question again.

Now write JS Many people use JQ, is not see the original binding event

As far as I know, there are 2 ways to see the binding event

1. Download Chorme plugin Visual-event

Okay, here comes the question, and the Chrome Web Store won't open at home.

The solution Fq, or

Download CRX from this address and manually install Http://files.cnblogs.com/wtcsy/VisualEvent_v2.1.rar

After the visual-event is loaded, point to the eye-like icon, and the mouse is placed on the DOM that needs to be viewed to show the bound event.

2. Use the DOM properties and $.cache method to find

Select the DOM for which you want to view events

View his attributes (jquery+ a number of attributes) as

Get the property value, enter the $.cache[property value in the Console tab] expand to see the bound event.

What is the type option for the new version of network?

The new chrome is not directly visible in the category (DOCUMENTS,IMAGES,SCRIPT,XHR ...)

There's a small funnel, you can see it by opening it.

Find the necessary resources in the sources, find a function in the JS file

Sometimes you need to find a JS file, you can do this

1. Open Sources tab

2. Press Ctrl+p

3. Enter the JS file name you want to find

Of course this is more than just smart find js,html and CSS can also find

Sometimes you need to find a function inside JS.

1. First select a JS file (required)

2.crtl+shift+o

If you do not select the JS file, press Crtl+shift+o to open the tag manager.

Format JS, (can also help you format your local JS)

Format js, curly braces.

JS on the network is compressed and merged, and curly braces can be used to format JS on the network.

Of course, with curly braces can also format the local JS, the local JS paste into the open JS inside, according to curly braces can be

This formatted curly brace is only on the Source tab surface.

Breakpoint, to Dom Breakpoint, XHR breakpoint, exception breakpoint

The breakpoint of the DOM

Dom breakpoints are in 3 form

1.Subtree Modifications (the child node of the DOM being listened to changes)

2.Attributes Modifications (the DOM property being listened to changes)

3.Node removal (when the DOM being listened to is deleted)

After setting these breakpoints, when the monitor hears the change, it will change after the breakpoint the JS place

such as delete, will breakpoint to delete the JS place

How do I set a breakpoint?

1. Open the Element panel

2. Select a DOM element, right mouse button

3. Select Break on ..., and the 3 breakpoints will pop up.

As shown

XHR Breakpoint

To a XHR breakpoint can enter the location of the request JS

Operation is as follows

1. Open the Source tab

2. There is a xhr breakpoints

3. There is a + number in the back, dot + number to add

You can make breakpoints on all xhr, and if you just want to break a breakpoint on a xhr, enter his address.

If you want to delete a breakpoint, select a bar, right-click to delete

Exception Breakpoint

It is possible to locate the location of JS throw exception, easy to find the wrong

Operation is as follows

1. Go to the Socurce tab

2. Point the circular button as shown in

Some of the problems encountered

Want to download plugins, but chrome Web Store can't open what to do?

I'm using the chrome version, and I can FQ

I used Chrome's official plugin Pagespeed insights to test the performance of the site, but always stuck in the middle?

That's the reason for the wall, FQ test.

How to debug the JS file on the line?

1. Replace with fiddler

2. If it is a JS file, you can format the breakpoint, if it is not loaded when the error, you can directly copy the original uncompressed code directly into the run

Chrome tricks keep track of some of the previously unfamiliar