Introduction to 5 Common Web debug debugging Plug-ins in JavaScript

In the front-end development, debugging technology is an essential skill, this article will introduce five kinds of front-end development of the necessary debugging technology.

1. Weinre Mobile Debugging
2. DOM Breakpoint
3. Debugger Breakpoint
4. Native Method Hook
5. Remote mapping Local debugging

Weinre

It's complicated to develop and debug on the move, so there's a weinre. Install weinre can realize PC to debug mobile phone page, so for mobile development debugging is very important OH ~

Install Weinre

Weinre can be installed via NPM:

 
  
  

	  
  
   
   
 
    
 
     
The code is as follows
 
     
Copy Code
 
    
 
    
 
     
NPM install-g weinre
 
    
 
   
 
  
  
 
  

After installation, execute the following command to start:

 
  
  

	  
  
   
   
 
    
 
     
The code is as follows
 
     
Copy Code
 
    
 
    
 
     
Weinre--httpport 8080--boundhost-all-
 
    
 
   
 
  
  
 
  

This access to your own 127.0.0.1:8080 follow the prompts to insert a section of JS in the Debug page, and then you can debug it. The operation interface resembles the Chrome devtools, the concrete operation may look down the http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html tutorial

Principle

Through the need to debug the page to introduce a section of Weinre JS, PC and mobile phone socket communication, so as to achieve real-time debugging.

Tips

1. If you think every time in the Debug page to introduce JS trouble, you can do a bookmark or Chrome plugin
2. If the installation trouble, you can use the PhoneGap weinre:http://debug.phonegap.com/

Dom Breakpoint

A Dom Breakpoint is a feature provided by the Firebug and Chrome devtools, which is automatically paused when JS needs to manipulate the breakpoint DOM, similar to debugger debugging.

Using a DOM breakpoint

1. Select the DOM node you want to break.
2. Right-click to selectBreak on..
3. Choose a breakpoint type

Tips

• In Firebug, a DOM breakpoint can be seen inside script> breakpoints
• In the chrome devtools, you need to see in the DOM breakpoints of the elements panel

JavaScript's Debugger statement

Need to debug JS, we can give the need to debug the place through the debugger interrupt point, code execution to the breakpoint will be tentative, at this time through a single step debugging and other ways can debug JS code

breakpoints that use JavaScript

Add in where you want to break the point debugger :

1 2 3

if (Waldo) { debugger; }

When you open the console panel, you can debug the

Tips

If you don't know how to debug, take a look at it as soon as possible: A tutorial for the Chrome devtools Interrupt point section

Hook Debugging for native code

Because the browser itself will have some similar window objects such as native JS methods, when you know that the native code has a problem, but you can not track debugging, you will be able to use this method.

As an example

For example, we noticed a change in the value of a Dom's property, but we don't know where the code caused the change, so we can break a breakpoint on the DOM element setAttribute , and the code is as follows:

1 2 3 4 5 6 7 8

var oldfn = Element.prototype.setAttribute; function(attr, value) { if "The_droids_you_are_looking_for") { debugger; } Oldfn.call (This, attr, value); }

In this way, when the attributes of the element change, the breakpoint is executed, and you can find the place of the call in the stack of the breakpoint.

Tips

This approach does not guarantee that it works in all browsers, such as the Safari privacy model for iOS, we can't modify the localStorage method

Remote mapping Local debugging

When there is a problem with a js/css on the line, we can use the proxy method, the remote file agent to the local to achieve remote mapping debugging. In fact, in addition to this function, but also as a grab tool, which is very important on the mobile side