How to flexibly use js debugging skills to solve style problems _ javascript skills

In many cases, front-end developers use JS scripts to modify the Dom structure or style of pages, which may cause unexpected bugs for various reasons, such: the Code logic is complex, the processing details are forgotten for a long time, or the bug left by others is simply taken over. In this case, debug 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.