The overview

Browser developer tools are often used in crawlers for simple packet capture analysis, JS reverse debugging, open:

  1. F12.
  2. Ctrl+Shift+I;
  3. Right-click to check or examine elements;
  4. Top right corner of your browser – > More Tools – > Developer Tools

Common means to disable the developer tools: https://blog.csdn.net/cplvfx/…

The official document: https://developer.chrome.com/…

  • Elements: Use the Elements panel to rearrange the layout and design of your site by freely manipulating the DOM and CSS.
  • Console: During development, you can use the Console panel to record diagnostic information, or you can use it as a shell to interact with JavaScript on a page.
  • Sources: Set breakpoints in the source panel to debug JavaScript, or connect to local files through Workspaces to use the real-time editor of developer tools.
  • Network (Network panel) : The information (including status, resource type, size, time, etc.) obtained from a web page Request, which can be used to optimize Network performance.
  • Performance: Using the Timeline panel, you can improve the Performance of your page at runtime by recording and viewing various events that occur during the life cycle of your site.
  • Memory (Memory panel) : Analyzes the execution time and Memory usage of web applications or pages.
  • Application panel: Records all resource information loaded on the website, including Storage data (Local Storage, Session Storage, IndexedDB, Web SQL, and Cookies), cache data, fonts, pictures, scripts, and style sheets.
  • Security: Use the Security panel to debug mixed content issues, certificate issues, and so on.
  • Lighthouse: Diagnose your current web usage and performance, and provide suggestions on how to optimize it.
  • (Element selection) : You can directly click on the page element, will automatically jump to the corresponding source code.
  • Terminal Emulation: Simulates various terminal devices and supports custom terminals.
  • (Settings) : Developer tool Settings, including some appearance, shortcuts, terminal devices, location Settings, etc.
  • (Custom) : Customize and control developer tools, including adjusting tool location, global search, running commands, other tools, etc.

Terminal emulation

Click on theIt can simulate various terminal devices, suitable for viewing the data on the mobile page. Click “More Tools” — > “Sensors” to simulate the location and orientation of the terminal. The toolbar can select the terminal model to be simulated, where Responsive is adaptive.

The Network panel

Controls the controller

  • Preserve log: Indicates whether to clear the request list after the page is reloaded.
  • Disable Cache: Whether to enable caching.
  • : Whether to enable packet capture.
  • : Clears the request.
  • : Whether to hide the Filter pane.
  • : search.
  • Allows you to test your site in a variety of Network environments including 3G, offline, etc. You can also customize the maximum download and upload traffic.
  • : Import/Export HAR file: Import or Export captured packet data.

The Filter Filter

  • Hide data URLs: Data URLs are small files embedded in documents, such as those that begin with data: in the request table, such as the more common SVG files. Check the Hide Data URLs check box to Hide such files.
  • All: Displays All requests.
  • XHR: XMLHttpRequest is a JavaScript API for creating AJAX requests. XHR is usually selected for fetching AJAX requests.
  • WS: WebSocket, a full-duplex communication protocol over a single TCP connection that HTML5 began to provide.
  • Manifest Android development file name, belongs to the AndroidManifest.xml file, in the simple Android system application presents important information code.
  • Has blocked cookies: Only requests with blocked response cookies are displayed.
  • Blocked Requests: Only Blocked Requests are displayed.

Breakpoint debugging

General breakpoint debugging

Applies to analyzing key function code logic

  1. Ctrl+Shift+F or three dots in the upper right corner to open global search, search for keywords.
  2. Locate the suspect code and click on the line number to bury the breakpoint.
  3. Debug code, analyze logic, where the console template can directly write JS code for debugging.

Each option function:

  • : Executes to the next breakpoint.
  • : Executes the next step without entering the called function.
  • : Goes inside the called function.
  • : exits the function.
  • : Step by step to execute the code, encounter a function call, then enter the function.
  • : Disables the breakpoint.
  • : Do not pause when an exception occurs.
  • Breakpoints: You can see the Breakpoints that have been buried.
  • Scope: You can see the value of the current local or global variable and modify the value.
  • Call Stack: You can see the current Stack of code calls, code execution order is bottom-up.

XHR breakpoint

If the keyword in the URL is matched, the system jumps to the parameter generation place. If the encryption parameter in the URL is not found in the global search, you can use this method to intercept.

Conduct a breakpoint

Breakpoints can be triggered when Mouse clicks, moves, keyboard keys, etc., or other events occur, such as Mouse – > click, which can quickly locate JS executed after a button is clicked.

Insert the JS

You can create a new JS script under Sources – > Snippets.

Prints the value of the Windows object

On console, enter the following code, for example, print only variables starting with _$:

for (var p in window) { if (p.substr(0, 2) ! == "_$") continue; console.log(p + " >>> " + eval(p)) }

Unlimited Debugger prevents debugging

Some pages open debugger infinite debugger phenomenon:

Man-in-the-middle interception replaces the infinite debug function

To view the call stack, click on the second line to jump to the original function:

[_0x2ba9bc[_0x20b2(‘0x79’)] [_0x2ba9bc[_0x20b2(‘0x7a’)]] [_0x2ba9bc[_0x20b2(‘0x7a’)]]

We use ReRes to write rules, and when we encounter this JS, we replace it with our local modified JS, and then the infinite debugger will not exist:



Methods empty

An infinite Debugger can also be cracked by overwriting and emptying its functions directly on Console. The disadvantage is that it will fail after refreshing.

Release timer

Applicable to the debug triggered by the timer class:

for (var i = 1; i < 99999; i++)window.clearInterval(i);

Hook Hook

In Windows system, everything is a message, press the keyboard, it is a message, Hook means to Hook, before the message is past, do not let it execute, and then oneself first processing. This technique provides a way to perform my actions before executing them for different messages or apis. “My operation” is the hook function. Insert breakpoints matching keywords in developer tools as a Chrome plugin.

Create a folder with the hook function file inject. Js and the plug-in configuration file manifest. Json:

Open the Chrome extension, open developer mode, load the unzipped extension, and select the folder you created:

Configuration file manifest.json

For example, a header hook has the following configuration file:

{"name": "Injection", "version": "1.0", "description": "RequestHeader hook ", "Manifest_version ": 1, "content_scripts": [ { "matches": [ "<all_urls>" ], "js": [ "inject.js" ], "all_frames": true, "permissions": [ "tabs" ], "run_at": "document_start" } ] }

The header hook

The header hook is used to locate where key parameters in the header are generated. The following code demonstrates that a breakpoint is inserted when Authorization is included in the header

var code = function(){
var org = window.XMLHttpRequest.prototype.setRequestHeader;
window.XMLHttpRequest.prototype.setRequestHeader = function(key,value){
    if(key=='Authorization'){
        debugger;
    }
    return org.apply(this,arguments);
}
}
var script = document.createElement('script');
script.textContent = '(' + code + ')()';
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);

Cookie hooks

The cookie hook is used to locate where the key parameter in the cookie is generated. The following code demonstrates how to insert a breakpoint when abcdefghijk is matched in the cookie:

var code = function(){ var org = document.cookie.__lookupSetter__('cookie'); document.__defineSetter__("cookie",function(cookie){ if(cookie.indexOf('abcdefghijk')>-1){ debugger; } org = cookie; }); document.__defineGetter__("cookie",function(){return org; }); } var script = document.createElement('script'); script.textContent = '(' + code + ')()'; (document.head||document.documentElement).appendChild(script); script.parentNode.removeChild(script);

Request a hook

The request hook is used to locate where key parameters in the request are generated. The following code demonstrates how to insert a breakpoint when the request URL contains AbCdE:

var code = function(){
var open = window.XMLHttpRequest.prototype.open;
window.XMLHttpRequest.prototype.open = function (method, url, async){
    if (url.indexOf("AbCdE")>-1){
        debugger;
    }
    return open.apply(this, arguments);
};
}
var script = document.createElement('script');
script.textContent = '(' + code + ')()';
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);