这个是虚坏叔叔的主站。牢记域名: [xuhss.com](拼音首字母)。首页可以搜索或: 虚幻账号

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

js 虚幻 29℃ 0评论

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

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

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

一、搜索面板

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

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

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

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

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

二、Page面板

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

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

三、Filesystem面板

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

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

四、Overrides(重写面板)

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

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

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

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

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

五、Content scripts面板

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

六、Snippets面板

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

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

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

就可以在面板中输入:

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

将文本获取到。

让后通过

aaa.value = ""

将百度一下设置为空。

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

七、调试代码面板

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

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

按钮的含义如下:

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

7..1Paused on breakpoint

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

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

}

7.2断点属性设置

右键断点,会弹出如下菜单:
03cb54a552ce48098e7327d3f6c3e140 - Js逆向教程-03浏览器调试工具-Source面板

Edit breakpoint

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

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

7.3Watch

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

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

7.4Call Stack

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

7.5Scope

作用域

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

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

7.6 XHR/DOM断点列表

7.7 全局监听事件

7.8 事件监听断点

八、Console面板

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

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

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

九、总结

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

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

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

💬 往期优质文章分享

🚀 优质教程分享 🚀

  • 🎄如果感觉文章看完了不过瘾,可以来我的其他 专栏 看一下哦~
  • 🎄比如以下几个专栏:Python实战微信订餐小程序、Python量化交易实战、C++ QT实战类项目 和 算法学习专栏
  • 🎄可以学习更多的关于C++/Python的相关内容哦!直接点击下面颜色字体就可以跳转啦!
学习路线指引(点击解锁) 知识定位 人群定位
🧡 Python实战微信订餐小程序 🧡 进阶级 本课程是python flask+微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一个全栈订餐系统。
💛Python量化交易实战 💛 入门级 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统
❤️ C++ QT结合FFmpeg实战开发视频播放器❤️ 难度偏高 分享学习QT成品的视频播放器源码,需要有扎实的C++知识!
💚 游戏爱好者九万人社区💚 互助/吹水 九万人游戏爱好者社区,聊天互助,白嫖奖品
💙 Python零基础到入门 💙 Python初学者 针对没有经过系统学习的小伙伴,核心目的就是让我们能够快速学习Python的知识以达到入门

🚀 资料白嫖,温馨提示 🚀

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

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

转载请注明:虚坏叔叔 » Js逆向教程-03浏览器调试工具-Source面板

喜欢 (0)

您必须 登录 才能发表评论!