JavaScript element code parsing

For some pages that do not know, If you can view how the js Code corresponding to the element works, you can turn to Chrome. The principle is that the debugger helps us parse the page element. We select the page element and use "review element" to quickly locate the Page code of the element, it also helps us track and parse the styles and js scripts corresponding to these page elements, so that we can understand the implementation of page structure and function, which makes it much easier for us to analyze the page source code.

Parse Element Method
Select the page element <span>... </span>, the Event Listeners in the menu bar on the right is the Event corresponding to this element. The debugger helps us find the reference method, even events corresponding to css styles can be parsed for US (a row of code was searched or tracked in the past, and it is indeed time-saving to locate them in one step ). We can see that there is a filter marked in the red box. We click to pull it down and select "Selected Node Only". This filters out the events corresponding to the Selected page element. The code is further transparent, which brings a lot of convenience and saves a lot of time.


Debugging
Similar to other scripting languages, there are two methods for debugging: one is breakpoint debugging, and the other is through the log printing method. The js built-in object console is called as follows:

If the variable data is an object, use the following method to print the log information:
Console. log (data );

Then, you can view debugging information in the debugger.