chrome skills record some unfamiliar things before_html/css_WEB-ITnose

I have been using Chrome for I don’t know how many years, but there are still some techniques that I am not familiar with. I will record the useful ones and those that I am not familiar with

How to view dom Binding events (see jquery binding events)

Where are the type options of the new version of network?

Find the required resources in Sources, and find a certain resource in the js file Function

formats js, (it can also help you format your own local js)

breakpoints, dom breakpoints, xhr breakpoints, exception breakpoints

Some problems encountered

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

View the binding events of dom, this is a very necessary skill. Chrome supports it too Very good

As shown in the picture below, select dom, and the listenersBody in Event Listeners

The problem is coming

listenersBody is not displayed at all Completely, what should I do?

In the listenersBody line, right-click the mouse, and a pop-up box store as global variable will appear

Click store as global variable, and the entire function will be displayed in the console.

The problem is here again

Many people now use jq to write js, but they can’t see the original binding event

It’s just me As far as I know, there are two ways to see bound events

1. Download the chorme plug-in Visual-Event

Okay, the problem is here again, the chrome web store is not available in China at all It can’t be opened

The solution is FQ, or

download crx from this address and install it manually

After installing Visual-Event, click on the icon that looks like an eye icon, the bound events will be displayed when the mouse is placed on the DOM that needs to be viewed

2. Find

through the DOM attributes and $.cache method

Select the dom you want to view events

View its attributes (jquery attributes of a number) as shown below

Get the attribute value and enter $.cache[attribute in the console tab Value] Expand and you can see the bound events

Where are the type options of the new version of network?

You can’t see categories (documents, images, scripts, xhr...) directly in the new chrome

There is a small funnel, you can see it by clicking on it

Find the required resources in Sources, and find a certain function in the js file

Sometimes you need to find a certain js file, you can do this

1 .Open the Sources tab

2. Press ctrl p

3. Enter the js file name you are looking for

Of course this is not just a smart search for js, html and css You can also search

Sometimes you need to find a function in js

1. First select a js file (required)

2.crtl shift o

If you don’t select the js file, press crtl shift o to open the tag manager

Format js, (you can also Help you format your local js)

Format js, use curly brackets.

Js on the Internet are compressed and merged, use curly brackets to format the js on the Internet js

Of course, you can also format local js using curly brackets. Paste the local js into the open js and press the curly brackets

This formatting curly bracket is just for There are only

breakpoints in the source tab, for dom breakpoints, xhr breakpoints, exception breakpoints

dom breakpoints

There are 3 forms of dom breakpoints

1.Subtree modifications (the monitored dom sub-nodes change)

2.Attributes modifications (the monitored dom attributes change)

3.Node removal (when the monitored dom is deleted)

After setting these breakpoints, when changes are monitored, the place where the js changes after the breakpoint will be

For example, deletion will cause a breakpoint to the deleted js location

How to set a breakpoint?

1. Open the Element panel

2. Select a dom element and right-click

3. Select break on... and 3 breakpoint methods will pop up.

As shown below

xhr breakpoint

After setting an xhr breakpoint, you can enter the place where the js that initiated the request

The operation is as follows

1. Open the source tab

2. There is an XHR Breakpoints

3. There is a number at the end and a period to add

You can breakpoint all xhrs. If you only want to breakpoint a certain xhr, enter its address, as shown in the picture

If you want to delete the breakpoint, select a certain one , right click the mouse to delete

Exception breakpoint

You can locate the location where the js throws the exception, which is convenient for troubleshooting

The operation is as follows

1. Enter the socurce tab

2. Click the round button, as shown in the picture below

Some problems encountered

I want to download the plug-in, but the chrome web store cannot be opened. What should I do?

I use chrome Changyou version, which can be FQ

I used the official chrome plug-in pagespeed insights to test the performance of the website, but it always gets stuck in the middle?

That’s because of the wall, FQ test

How to debug online js files?

1. Replace

2 with fiddler. If it is a js file, you can format breakpoints. If an error is not reported when loading, you can directly copy the original uncompressed code and run it