Chrome skills record some previously unfamiliar, chrome is not

Chrome skills record some previously unfamiliar, chrome is not

Chrome has never known how many years it has been in use, but it is still unfamiliar with some techniques, recording useful and unfamiliar

 

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

Where is the type option of the new network version?

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

Format js. (You can also format your local js)

Breakpoint, dom breakpoint, xhr breakpoint, and exception breakpoint

Some Problems Encountered

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

Check the dom binding event. This is a very necessary skill. chrome supports a lot.

As shown in, select the dom, In the listenersBody of Event Listeners

The problem arises.

What should I do if the listenersBody is not completely displayed?

In the row listenersBody, right-click the row and the store as global variable dialog box is displayed.

Click store as global variable. The entire function is displayed in the console.

The problem is coming again.

Many people use jq to write JavaScript code, but they cannot see the original binding events.

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

1. Download The chorme plug-in Visual-Event

Okay, the problem is coming again. chrome web store cannot be opened in China.

Solution: FQ or

Download crx from this address and install the http://files.cnblogs.com/wtcsy/VisualEvent_v2.1.rar manually

After Visual-Event is installed, click the same icon as your eyes and place the cursor over the dom to be viewed to display the Bound Event.

2. Use dom attributes and the $. cache method.

Select the dom for which you want to view the event

View its attributes (attributes of jquery + a digit), as shown in

After obtaining the property value, enter $. cache [property value] on the console tab to view the Bound event.

Where is the type option of the new network version?

In the new chrome, classification is not directly visible (documents, images, script, xhr ...)

There is a small funnel. Click it to see it.

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

Sometimes you need to find a js file.

1. Open the Sources Tab

2. Press ctrl + p

3. Enter the js file name you want to search.

Of course, this is not just smart search js, but html and css can also be searched.

Sometimes you need to find a function in 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. (You can also format your local js)

Format js and braces.

JavaScript files on the network are compressed and merged. You can use braces to format the js files on the network.

Of course, you can also format the local js with braces, paste the local js into the opened js, and press the braces.

The formatted braces are only available on the source tab.

Breakpoint, dom breakpoint, xhr breakpoint, and exception breakpoint

Dom breakpoint

Dom breakpoint is in the form of 3

1. Subtree modifications (the subnode of the monitored dom changes)

2. Attributes modifications (the monitored dom attribute changes)

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

After these breakpoints are set, when the listener changes, the js location that changes after the breakpoint occurs

For example, deleting will break the breakpoint to the deleted js location.

How do I set a breakpoint?

1. Open the Element panel.

2. Right-click a dom Element

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

As shown in

Xhr breakpoint

After a breakpoint is sent to an xhr instance, you can access the js location where the request is initiated.

The operations are as follows:

1. Open the source tab.

2. There is an XHR Breakpoints

3. Add a plus sign (+) at the end

You can breakpoint all xhr. If you only want to breakpoint an xhr, enter its address,

To delete a breakpoint, right-click a breakpoint and choose Delete.

Exception breakpoint

That is, you can locate the location where js throws an exception to facilitate troubleshooting.

The operations are as follows:

1. Go to the socurce Tab

2. Click the circle button, as shown in

Some Problems Encountered

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

I am using chrome Changyou edition. I can use FQ.

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

That's because of the wall, FQ Testing

How can I debug online js files?

1. Replace with fiddler

2. If it is a js file, it can be formatted as a breakpoint. If an error is not reported during loading, you can directly copy the original uncompressed code to run it.