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

This article shows you how to use chrome developer tools to debug programs, the content is concise and easy to understand, can definitely make your eyes bright, through the detailed introduction of this article, I hope you can learn something.

Many people have read my previous articles and said they will not debug, so today I would like to share with you how I used chrome developer tools to debug.

First of all: the following are my own exploration when using developer tools, the relevant functions may not be quite right, if you find that I am wrong, welcome to point out! Or share some other tips in the comments section.

1. First row of buttons

Let's talk about these buttons first, in order from left to right:

Jump to the next breakpoint, and if there is no breakpoint, debugging will stop.

Do not jump into the function to execute the next line of code, which can be used when the internal logic of the function is too much or unimportant

If you execute a line of code down, you will go inside the function, and you can use this when you need to understand the logic inside the function.

Jump out of the current function and use this when you have a loop inside the function or suddenly feel that the function can be skipped

Prohibit all breakpoints, do not do any debugging, generally rarely use

The switch of whether or not to break when the program runs to an exception is also rarely used, and we generally debug other people's programs with few exceptions.

The above buttons are commonly used on the first five, for reverse JS debugging is very important, need to be familiar with the use, when you know how to use, the debugger will be handy.

2. Watch and call stack

This is used to monitor the value of a variable, such as in a program, when you need to pay attention to which variable has changed, you can click the plus sign in the upper right corner here to observe the value of this variable during debugging.

The above is the call stack, which is very important.

It is used to view the call stack of the js during execution, which is needed when we are looking for an encrypted place. For example, when we see that the parameters I need have been generated at a breakpoint, we can look at the call stack to see how the previous execution procedure is called, and it is easy to find the generated place.

This also needs to be very skilled, you can do it by yourself.

3. Xhr breakpoint

This is the xhr breakpoint, when you need to capture some requests, you can use this, know how to use it, and sometimes save a lot of effort to find where the encryption is generated. However, it needs to be used in conjunction with the call stack above.

For example, when we do something, we need to send a request, um, such as clicking on a login or clicking on a link, which will send a request, and if you need to know their parameters, you can tick it and capture it. There might be a surprise!

You can also choose to capture only requests for a specified domain name, but I haven't used it, so I won't talk about it here. Generally, we can capture all of them, because if we have captured useless requests, we can press the first button mentioned in the first above and jump to the next xhr breakpoint.

4. Event monitoring

This is used to monitor some events. Generally speaking, encryption is very difficult to use. What I have involved is still very little, and some sliding verification codes are also used, including sliding monitoring, as well as some click events. If you want to crack some more sophisticated websites, you still need to be familiar with the use of this, to understand what these events are, when you have been looking for encrypted places for a long time and have no idea, you can come here and have a look. It's a big surprise.

5. Related skills

1) when looking for an encrypted place, we can first take a look at the call stack here

Something close to landing

The above will have the generation of the parameters we are looking for. Sometimes, it is better to find an encryption place from here, and sometimes there are too many call stacks, which may not be easy, but it is also a breakthrough.

2) hook some cookie

Hook as I understand it means capture, we need to often find some cookie worthy location, we can use hook to capture, how to use it? I also learned from the cold moon god, here first present the boss blog and then say: https://lengyue.me/

Here is the oil monkey script, a plug-in, download address: http://www.tampermonkey.net/

After installation, click the plug-in to select add script, and then add this code to it.

You need to get the complete code and reply to hook in the official account "Daily Learning python" to get it.

The next step is to open this script for hook.

For example, the cookie of our previous Nubian Forum

The above is how to use chrome developer tools to debug programs. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.