Shulou(Shulou.com)06/02 Report--

What is the JavaScript breakpoint debugging method that does not rely on the browser console? in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

As browsers become more and more powerful, code debugging in most cases can be solved through some debugging tools that come with the browser. However, for some special cases, you still can not enjoy the powerful debugging capabilities of the browser, such as debugging of web embedded in the QQ client (although QQ can compile developer tools, but you still need to install specified packages or tools), abnormal browser web, embedded in mobile scenarios and other scenarios. Based on this scenario, our team has introduced weinre under nohost and has been widely used. However, weinre has some limitations, which can only be viewed by console.log and DOM, and can not support breakpoint debugging.

This article focuses on the ability to debug breakpoints simply through JavaScript, which does not depend on the browser console ability, and provides another idea and method for everyone to solve the problem. First of all, we will give the use of the tool, so that we have a perceptual knowledge, and then explain the specific implementation principle.

[test use]

1, cmd command under the implementation of "npm install breakpoint-g" (npm installation is not described,-g for global installation and registration of bin commands) 2, cmd command line under the execution of "breakpoint" (will give help, and default to start the test directory: can be accessed directly through URL); 3, open two modern browsers such as chrome and safari, respectively, open the prompt of the two URL.

All right, you can test it in the browser in three simple steps. The operation method of this ui/index.html is as follows:

Is it very simple:), let's give an example of actual combat.

[actual combat use]

[parameter description]

Usage: breakpoint-d htdocsDir-r passbyRule

-d specifies the local static directory, where debug scripts will be injected into the HTML file head.

-r specifies the transparent transmission rule, which is usually used to transparently transmit CGI requests to the existing network server; if you need to pass through to the specified server, you need to point to the local hosts file

-h when there are multiple network cards, you can use-h to specify an IP

After breakpoint execution, 3 ports are enabled locally, 80 (for access services), 8000 (for controllers), and 8500 (for file rewriting)

[examples of actual combat]

Suppose our domain name is: abc.com; local static files (HTML, CSS, JS, etc.) directory is: e:\ svn\ trunk\ htdocs\, then you can pass "breakpoint-d e:\ svn\ trunk\ htdocs" to forward all requests to the local directory, for example: http://abc.com/a.html will return the contents of the local directory e:\ svn\ trunk\ htdocs\ a.html.

However, it is not possible to access abc.com directly in the browser at this time. You need to point the abc.com to the local IP through tools such as fiddler (see Step 1).

Then access the http://10.64.53.85:8000/ui/index.html to open the controller; access: http://abc.com/a.html to access the content of the resource.

It is not difficult to find that the access content has been successfully local, and automatically added a debugging script to the header, which is done.

But often when debugging, we want some files to access the existing network resources or other server resources, at this time, we can use the-r parameter to regularly match the corresponding request. For example, after abc.com points to the local IP, it is hoped that all requests under the abc.com/cgi-bin/ will be sent to the current network. Then just execute "breakpoint-d e:\ svn\ trunk\ htdocs\-r cgi-bin".

[principle analysis]

How to implement breakpoint debugging through JavaScript?

The core problem of breakpoint debugging is to pause the execution of the script on a line of code, so Aleksander Kmetec's solution is to add a breakpoint function before each line of JavaScript. The breakpoint function blocks the browser through the synchronization property of AJAX.

The situation before and after the modification of JavaScript is as follows:

Before and after modification

Var a = 1

Var b = 2

Function test () {

Var c = 'init'

Cantilever change`

}

Break (); var a = 1

Break (); var b = 2

Break (); function test () {

Break (); var c = 'init'

Break (); centering changes

}

This is a smart way to determine the location of the breakpoint and block the browser from executing the following script by initiating a synchronous AJAX request in the break function.

[breakpoint structure diagram]

1. Initiate a web page request through a browser

2. The request is directed to our rewriting service through fiddler and other methods, and the rewriting service handles the process according to the request link. If the regular rule of-r is matched, it is forwarded directly to the existing network server, otherwise the content under the local-d directory is requested.

3, transparent content will not be dealt with directly, other contents will be judged: 1, the HTML file will default in the head*** line to add the debug script script (the script includes debugging methods, such as break (); 2, JS file will add break () in front of each line of the script; function calls.

4. Rewrite the data returned by the service to the browser

5. When the browser executes JS, it first encounters break (), and initiates a synchronous XHR request, blocking the execution of the browser.

6. If the breakpoint is set through the debug service UI interface, the debug service will hold the XHR request that lives in break () until the debug service UI issues a new command (such as skip, next line, etc.)

This is the answer to the question about the debugging method of JavaScript breakpoint that does not rely on the browser console. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.