Sharing steps to flexibly apply js debugging skills to solve style problems_javascript skills

Due to various reasons, such as: the code logic is complex, processing details have been forgotten over time, or simply taking over and modifying bugs left by others, in this case, debugging will become a headache.

I would like to share some JS debugging skills here, which can often produce better results for various difficult and complicated diseases.

Step 1: Check the content rendered directly by the server

Using the method of viewing the source file, this step first determines whether the HTML fragment of the page is abnormal on the server side.

Step 2: Compare the difference between the actual HTML content and the original content rendered by the server

You can use some front-end tools (for example: developer tools under IE, Firebug, Chrome Developer tools, etc.), view the content of the current HTML fragment in real time

Step 3: Add a debugger at the appropriate location

For example: first find out the js code that may cause problems, and add it to the appropriate place Add a debugger, or use a tool to add a breakpoint similar to "break when an attribute is modified". For example, the actual HTML has an extra width attribute than the original content

Step 4: Run your page and enter Interrupt and check the js call stack (a critical step)

It is recommended to use the Visual Studio debugger supported by IE (you need to set IE first: cancel "Disable script debugging"), then you can basically determine which js it is. The method modifies the style