JS逆向学习笔记 Chrome DevTools调试技巧

admin 2025年1月2日10:07:30评论3 views字数 3261阅读10分52秒阅读模式

1. Elements(元素面板)

功能:

  • **用于检查和编辑 HTML 和 CSS。**这是前端开发调试中最常用的面板。
  • 可以实时查看网页 DOM 结构,修改 HTML、CSS 样式,甚至直接添加或删除元素。
  • 支持查看布局信息、盒模型(Box Model)以及样式优先级。

主要功能点:

  • **实时编辑 DOM 和样式:**可以直接修改 HTML 标签和 CSS 规则,并实时预览效果。
  • **查看和调整盒模型:**包括 marginpadding 和边框等信息。
  • **事件监听:**可查看元素绑定的事件以及对应的回调函数。
  • **强大的搜索功能:**支持按标签名、CSS 类、属性等搜索 DOM 节点。

示例:

假设网页中有以下简单代码:

<!DOCTYPE html><html><head><title>DevTools Example</title><style>.highlight {background-color: yellow;color: red;    }</style></head><body><divid="content">Hello, World!</div><buttononclick="changeText()">Click Me</button></body><script>functionchangeText() {document.getElementById('content').innerText = "Text Changed!";  }</script></html>
使用场景:
  • 打开 DevTools -> Elements,右键选择 <div id="content">Hello, World!</div>
  • 修改内容,例如将 Hello, World! 改为 Welcome to DevTools!,回车后页面会实时更新。
  • 在样式中加入 .highlight 类,观察页面变化。
  • 查看按钮元素的 onclick 绑定事件。

2. Sources(源代码面板)

功能:

  • 用于调试 JavaScript 代码。
  • 支持查看、设置断点、调试和分析代码。
  • 查看网页加载的所有资源,包括 HTML、JS、CSS、图片等。
  • 提供“工作区”功能,可将本地代码与浏览器调试集成。

主要功能点:

  • **断点调试:**支持常规断点、条件断点、监听 DOM 变化的断点等。
  • **逐步执行代码:**逐行调试代码,查看变量值和调用堆栈。
  • **黑盒脚本:**将第三方库标记为“黑盒”,避免在调试过程中进入它们的代码。
  • **实时修改 JS:**可以直接修改脚本并执行。

示例:

假设我们调试如下脚本:

functioncalculateSum(a, b) {let sum = a + b;console.log("Sum:", sum);return sum;}document.querySelector("button").addEventListener("click"() => {calculateSum(510);});
使用场景:
  • 在 Sources 面板中找到相关的 JS 文件。
  • 在 calculateSum 函数的第一行(let sum = a + b;)设置断点。
  • 点击页面中的按钮,调试会暂停在断点处。
  • 查看本地变量值:鼠标悬停在 a 或 b 上,或在右侧的调试面板查看变量。
  • 步进(Step Over)查看代码如何逐步执行。

3. Network(网络面板)

功能:

  • **用于监控和分析网页请求。**包括 XMLHttpRequest、Fetch API 请求、图片、CSS、JS 等所有资源的加载。
  • 提供关于每个请求/响应的详细信息,如 HTTP 状态码、请求头、响应头、响应数据等。
  • 分析请求时间,找出性能瓶颈。

主要功能点:

  • **过滤和搜索:**按文件类型、状态码、域名等过滤请求。
  • **请求详情:**查看 Headers、Preview、Response 等信息。
  • **性能分析:**查看请求耗时、DNS 查询时间、等待时间等。

示例:

假设有如下 AJAX 请求:

fetch('https://jsonplaceholder.typicode.com/posts/1')  .then(response => response.json())  .then(data =>console.log(data))  .catch(error =>console.error('Error:', error));
使用场景:
  • 在网页加载时,打开 Network 面板。
  • 观察 https://jsonplaceholder.typicode.com/posts/1 的请求。
  • 点击请求,查看详细信息:
    • 请求头(Headers):显示 URL、方法(GET)、状态码(200)等。
    • 响应(Response):查看返回的 JSON 数据。
    • 预览(Preview):以可读格式展示 JSON。
  • 使用过滤功能仅查看 XHR 请求。

4. Application(应用面板)

功能:

  • 用于管理和查看网页的存储和资源。
  • 包括 Cookies、Local Storage、Session Storage、IndexedDB、Service Workers、缓存等。
  • 可分析 PWA(渐进式网页应用)的状态。

主要功能点:

  • **存储管理:**查看和编辑 Cookies、Local Storage、Session Storage 等。
  • **缓存分析:**清除或查看缓存存储的内容。
  • **Service Workers:**调试网页的离线功能和后台脚本。
  • **Manifest 和 PWA 功能:**查看网站是否具备 PWA 属性。

示例:

假设我们存储一些数据在 Local Storage:

localStorage.setItem('username''JohnDoe');localStorage.setItem('theme''dark');
使用场景:
  • 在 Application 面板中打开 Local Storage
  • 查看 username 和 theme 的键值对。
  • 修改 theme 的值为 light,观察页面如何响应。
  • 清空 Local Storage 数据,测试网页是否能正确处理缺失数据。

组合使用示例:

假设我们有一个包含以下功能的简单网页:

<!DOCTYPE html><html><head><title>DevTools Demo</title><style>body { font-family: Arial; }.error { color: red; }</style></head><body><pid="message">Loading...</p><script>fetch('https://jsonplaceholder.typicode.com/posts/1')      .then(response => response.json())      .then(data => {document.getElementById('message').innerText = data.title;      })      .catch(error => {document.getElementById('message').innerText = 'Failed to load data.';document.getElementById('message').classList.add('error');      });</script></body></html>
  • **Elements 面板:**查看 <p id="message">Loading...</p> 标签,验证样式是否正确应用,或动态修改内容。
  • **Sources 面板:**在 fetch 调用处设置断点,检查响应数据。
  • **Network 面板:**查看 https://jsonplaceholder.typicode.com/posts/1 的请求和响应。
  • **Application 面板:**存储临时状态数据或调试缓存行为。
  • JS逆向学习笔记  Chrome DevTools调试技巧

     

原文始发于微信公众号(逆向有你):JS逆向学习笔记 -- Chrome DevTools调试技巧

免责声明:文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与教学之用,读者将其信息做其他用途,由读者承担全部法律及连带责任,本站不承担任何法律及连带责任;如有问题可邮件联系(建议使用企业邮箱或有效邮箱,避免邮件被拦截,联系方式见首页),望知悉。
  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2025年1月2日10:07:30
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                   JS逆向学习笔记 Chrome DevTools调试技巧https://cn-sec.com/archives/3582119.html
                  免责声明:文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与教学之用,读者将其信息做其他用途,由读者承担全部法律及连带责任,本站不承担任何法律及连带责任;如有问题可邮件联系(建议使用企业邮箱或有效邮箱,避免邮件被拦截,联系方式见首页),望知悉.

发表评论

匿名网友 填写信息