Js逆向教程-03浏览器调试工具-Source面板

切换到source面板，对于source面板，需要打开搜索面板才能发挥出完整的功能。

一、搜索面板

通过点击右上角的按钮，切换到搜索面板

搜索页面的左侧，可以给搜索页面添加其他功能

比如console控制台功能，Network request blocking功能

二、Page面板

它包含当前百度页面请求的所有资源文件，都位于page中，平常用的不多。

三、Filesystem面板

本地文件系统，可以添加一个本地的workspace，记得要允许访问权限

四、Overrides(重写面板)

它的作用时对当前网站上已有的js文件进行替换改写，然后放置到网站上看下替换改写后的效果，它也会请求权限，记得点允许。

可以在network面板中找到一个js文件，右键=》Open in source pannel ，然后，就可以编辑这个js文件了，比如说可以添加一个dubugger，保存后，你会发现

Overrides面板中会有一个js文件保存到本地文件夹中,。

五、Content scripts面板

这里存放的当前上下文的js文件，上下文的概念后面会讲。

六、Snippets面板

它用于在网站上创建工作js记录。

比如说你想实现一个功能，但是你不想放到本地文件中去保存，就可以在这里写js文件，在这里写的js代码可以影响到整个网站页面的。

比如说想要修改百度一下的文本：

就可以在面板中输入：

var aaa = document.querySelector("#su");

将文本获取到。

让后通过

aaa.value = ""

将百度一下设置为空。

七、调试代码面板

找到一个js文件，在左侧位置，添加断点，添加后，刷网页，就会在断点停住，此时，可以通过如下按钮进行代码调试：

按钮的含义如下：

7…1Paused on breakpoint

在捕获到异常代码时中断停止。抛异常,，会自动在这里停下

try
{//抛异常,，会自动在这里停下
}
catch
{}

7.2断点属性设置

右键断点，会弹出如下菜单：

Edit breakpoint

编辑断点条件，当为true,当前断点生效，如果为 false ，跳过当前这一行所有断点。

7.3Watch

可以将一个变量添加到监听列表，将变量的数据都展现出来

。比较方便的查看变量数据，而不是在console面板中，每次都输出。

7.4Call Stack

调试堆栈比较重要，后面会对应讲解。

7.5Scope

作用域

1. Local局部作用域
2. Global全局作用域

7.6 XHR/DOM断点列表

7.7 全局监听事件

7.8 事件监听断点

八、Console面板

用于控制台用于交互操作数据。

1. Hide network:是否隐藏network，能看到的数据包越多越好，不用隐藏
2. Preserve log保留数据包 勾选上方便调试
3. selected context only:选择当前上下文，可以不用勾选
4. Group similar 分组
5. Log XMLHttpRequests 是否输出xml请求

九、总结

最后的最后
由本人水平所限，难免有错误以及不足之处， 屏幕前的靓仔靓女们 如有发现，恳请指出！

最后，谢谢你看到这里，谢谢你认真对待我的努力，希望这篇博客对你有所帮助！

你轻轻地点了个赞，那将在我的心里世界增添一颗明亮而耀眼的星！

💬 往期优质文章分享

• C++ QT结合FFmpeg实战开发视频播放器-01环境的安装和项目部署
• 解决QT问题：运行qmake：Project ERROR: Cannot run compiler ‘cl‘. Output:
• 解决安装QT后MSVC2015 64bit配置无编译器和调试器问题
• Qt中的套件提示no complier set in kit和no debugger，出现黄色感叹号问题解决（MSVC2017）
• Python+selenium 自动化 - 实现自动导入、上传外部文件（不弹出windows窗口）

🚀 优质教程分享 🚀

• 🎄如果感觉文章看完了不过瘾，可以来我的其他 专栏 看一下哦~
• 🎄比如以下几个专栏：Python实战微信订餐小程序、Python量化交易实战、C++ QT实战类项目 和 算法学习专栏
• 🎄可以学习更多的关于C++/Python的相关内容哦！直接点击下面颜色字体就可以跳转啦！

🚀 资料白嫖，温馨提示 🚀

关注下面卡片即刻获取更多编程知识，包括各种语言学习资料，上千套PPT模板和各种游戏源码素材等等资料。更多内容可自行查看哦！