如何使用chrome开发者工具来调试程序

本篇文章为大家展示了如何使用chrome 开发者工具来调试程序，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联建站网站建设公司，提供做网站、成都网站建设，网页设计，建网站，PHP网站建设等专业做网站服务;可快速的进行网站开发网页制作和功能扩展；专业做搜索引擎喜爱的网站，是专业的做网站团队，希望更多企业前来合作!

很多人看了我之前写的文章，都说不会如何去调试，那今天就和大家分享是我如何去使用 chrome 开发者工具进行调试的。

先说明：以下内容均是我个人在使用开发者工具时自己探索的，相关的功能有可能说得不是很对，如果你发现我说错了，欢迎指出！或者在评论区分享一些别的技巧。

1. 第一排按钮

先说下这几个按钮，从左到右按顺序：

1. 跳到下一个断点处，如果后面没有断点了的话，就会停止调试

2. 不跳入函数内执行下一行代码，当函数内部逻辑太多或者不重要的时候，可以使用这个

3. 向下执行一行代码，会进入函数内部，需要理解函数内部的逻辑时候就可以使用这个

4. 跳出当前函数，当你所在的函数内部有循环或者突然觉得这函数可以跳过，就可以使用这个

5. 禁止所有断点，不做任何调试，一般很少用

6. 程序运行到异常时是否中断的开关，也很少用，我们一般调试别人的程序很少会有异常。

上面这几个按钮常用的就前面 5 个，对进行逆向 JS 时需要调试时非常重要，需要熟悉使用，当你掌握了如何去用的话，调试程序起来会得心应手。

2.  watch 和 call stack

这个用于监视变量的值的，比如在一段程序种，你需要关注哪个变量在什么时候变化了，就可以在这里点击右上角的加号进行添加，来观察在调试过程种这个变量的值。

上面这个是调用栈，特别重要。

用于查看 js 在执行过程种的调用栈，这个在我们寻找加密地方的时候就需要用到。比如我们在某个断点处，看到我需要的参数已经生成了，这时候我们就可以查看调用栈，看看他前面的执行过程种是如何调用的，很容易就会找到生成的地方。

这个也是需要非常熟练的，自己多折腾一下就会了。

3.  xhr 断点

这个是 xhr 断点，当自己需要捕捉一些请求的时候，可以使用这个，懂得如何去使用，有时候对于查找加密生成地方会省很多力气。不过需要配合上面的调用栈进行使用。

比如，我们在进行某个操作的时候，需要发送请求，嗯，比如点击登陆或点击链接，这些都会发送请求，如果你需要知道他们的参数的话，就可以在上面打个钩，捕捉一下。说不定会有惊喜！

这个还可以选择只捕捉指定域名的请求，但我没有用过，所以在这里就不说了，一般全部捕捉就行了，因为我们如过捕捉到没有用的请求，可以按下上面第一条所说的 第一个按钮，就会跳到下一个 xhr断点了。

4. 事件监听

这个是用来监听一些事件的，一般加密非常难的就会用到，我现在涉及到的还是很少，还有一些滑动验证码也会用到，里面就用到滑动监听，还有一些点击事件等。如果想要破解一些更加高深的网站的话，这个还是需要熟悉使用的，了解一下这些都是什么事件，当你在找加密地方找了很久都没有头绪的时候，都可以来这里看看，惊喜大大的。

5. 相关技巧

1）在找加密地方的时候，我们可以先来看看这里的调用栈

某乎登陆

上面这个就会有我们要找的参数的生成的地方，有时候，从这里开始寻找加密地方比较好突破，有时候会有太多调用栈，可能就不是很容易，不过也是一个突破口。

2）hook 一些 cookie

hook 按我的理解就是捕捉的意思，我们需要经常找一些 cookie 值得位置，就可以使用 hook来捕捉，怎么用呢？我也是向冷月大神学习的，这里先献上大佬博客再说：https://lengyue.me/

这里使用的是油猴脚本，一个插件来的，下载地址：http://www.tampermonkey.net/

安装后点击插件选择添加脚本，然后把这段代码添加到上面即可

需要获得完整代码在公众号 「日常学python」后台回复 hook获取

接下来就是开启这个脚本进行 hook 了

就比如我们之前的努比亚论坛的cookie 

上述内容就是如何使用chrome 开发者工具来调试程序，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。