如何使用chrome开发者工具来调试程序-成都快上网建站

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

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

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

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

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

1. 第一排按钮

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

先说下这几个按钮,从左到右按顺序:

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

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

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

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

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

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

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

2.  watch 和 call stack

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

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

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

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

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

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

3.  xhr 断点

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

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

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

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

4. 事件监听

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

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

5. 相关技巧

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

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

某乎登陆

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

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

2)hook 一些 cookie

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

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

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

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

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

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

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

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

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


新闻名称:如何使用chrome开发者工具来调试程序
浏览路径:http://kswjz.com/article/jhsdjo.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流