Introduction to five common web debug debugging plug-ins in javascript

If you do not know how to use these web debug debugging plug-ins in front-end development, I will summarize the five js and web debug debugging plug-ins, I hope it will be helpful to you.

Debugging technology is essential in front-end development. This article will introduce five debugging technologies necessary for front-end development.

1. Weinre mobile debugging
2. DOM breakpoint
3. Debugger breakpoint
4. Native METHOD hook
5. Remote ing local debugging

Weinre

Development and debugging on mobile devices are complicated, so there isWeinre. Installing weinre can enable pc debugging for mobile phone pages, so it is very important for mobile development debugging ~

Install weinre

Weinre can be installed through npm:

 
 
  
  
  
 
   
 
    
The Code is as follows:
 
    
Copy code
 
   
 
   
 
    
npm install -g weinre
 
   
 
  
 
 
 

After the installation is complete, run the following command to start:

 
 
  
  
  
 
   
 
    
The Code is as follows:
 
    
Copy code
 
   
 
   
 
    
weinre --httpPort 8080 --boundHost -all-
 
   
 
  
 
 
 

In this way, access your own 127.0.0.1: 8080 and insert a piece of js in the debugging page as prompted, and then you can debug it. Operation Interface similar to Chrome DevTools, specific operations can see the http://people.apache.org /~ Pmuellr/weinre/docs/latest/Running.html tutorial

Principle

Introduce a weinre js in the page to be debugged to implement socket communication between the pc and the mobile phone, so as to realize real-time debugging.

Tips

1. If you want to introduce JavaScript code to the debugging page every time, you can make a bookmarkdonor chrome plug-in.
2. If installation is too troublesome, you can use the weinre: http://debug.phonegap.com/phonegap/

DOM breakpoint

DOM breakpointIs a function provided by Firebug and chrome DevTools. When JavaScript needs to operate the breakpoint DOM, it will be automatically suspended, similar to debugger debugging.

Use DOM breakpoint

1. Select the DOM node you want to breakpoint
2. Right-clickBreak on..
3. Select the breakpoint type

Tips

• In Firebug, DOM breakpoint can be seen in Script> Breakpoints
• In chrome DevTools, you need to see it in DOM Breakpoints on the Elements panel.

Javascript debugger statement

When you need to debug js, we can passdebuggerWhen you open a breakpoint, the code execution will be tentative when it reaches the breakpoint. At this time, you can debug the js Code in a single step.

Use javascript breakpoint

Add a checkpointdebugger:

123	if (waldo) {debugger;}

 

In this case, open the console panel and you will be able to debug it.

Tips

If you do not know how to debug it, read the breakpoint section of Chrome DevTools as soon as possible.

Hook debugging of native code

Because the browser will build some similarwindowObjects, such as native js methods, can be used when you know that native code is indeed faulty, but you cannot track debugging.

For example

For example, we noticed that the attribute value of a DOM has changed, but we do not know where the code is causing the change, so we can give the DOM ElementsetAttributeThe Code is as follows:

12345678

var oldFn = Element.prototype.setAttribute;Element.prototype.setAttribute = function (attr, value) { if (value === "the_droids_you_are_looking_for") { debugger; } oldFn.call(this, attr, value);}

 

In this way, when the attribute of the element changes, it will be executed to the breakpoint, you can find the place to call in the breakpoint stack ~

Tips

This method is not guaranteed to be valid in all browsers. For example, in the safari private mode of ios, we cannot modifylocalStorageMethod

Remote ing local debugging

When a js/css file has a problem online, we can use the proxy method to proxy remote files to local for remote ing debugging. In fact, in addition to this function, it can also be used as a packet capture tool, which is very important on the Mobile End.