1. Elements(元素面板)
功能:
-
**用于检查和编辑 HTML 和 CSS。**这是前端开发调试中最常用的面板。 -
可以实时查看网页 DOM 结构,修改 HTML、CSS 样式,甚至直接添加或删除元素。 -
支持查看布局信息、盒模型(Box Model)以及样式优先级。
主要功能点:
-
**实时编辑 DOM 和样式:**可以直接修改 HTML 标签和 CSS 规则,并实时预览效果。 -
**查看和调整盒模型:**包括 margin
、padding
和边框等信息。 -
**事件监听:**可查看元素绑定的事件以及对应的回调函数。 -
**强大的搜索功能:**支持按标签名、CSS 类、属性等搜索 DOM 节点。
示例:
假设网页中有以下简单代码:
<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(5, 10);
});
使用场景:
-
在 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 数据,测试网页是否能正确处理缺失数据。
组合使用示例:
假设我们有一个包含以下功能的简单网页:
<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调试技巧
免责声明:文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与教学之用,读者将其信息做其他用途,由读者承担全部法律及连带责任,本站不承担任何法律及连带责任;如有问题可邮件联系(建议使用企业邮箱或有效邮箱,避免邮件被拦截,联系方式见首页),望知悉。
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论