How to flexibly use js debugging skills to solve style problems

For various reasons, such as complicated code logic, long-time forgetting to handle details, or simply taking over and modifying bugs left by others, debugging becomes a headache.

I would like to share some JS debugging skills here, which can often provide better results for various intractable diseases.

Step 1: Check the content from the server's direct render

By viewing the source file, this step first makes it clear that the page HTML segment is not normal on the server.

Step 2: Compare the differences between the actual HTML content and the original content from the Server render

You can use some front-end tools (such as developer tools in IE, Firebug and Chrome) to view the current HTML clip content in real time.

Step 3: Add a debugger in a proper location

For example, first find out the js Code that may probably have a problem, add a debugger in a proper place, or use a tool to add a breakpoint similar to "interrupted when the attribute is modified, for example, the actual HTML has an extra width attribute than the original content.

Step 4: Run your page, enter the interrupt, and check the js call stack (key Step)

We recommend that you use the Visual Studio debugger supported by IE (you must first set IE: Disable script debugging). Then you can determine which js method has modified the style.