◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
强大的浏览器调试技术
ID:15410 / 打印
浏览器调试技术是任何 web 开发人员的必备能力。使用正确的工具和程序可以大大简化开发过程，并避免数小时的挫折。现代浏览器中内置了多种调试工具，可以帮助您识别和解决在线应用程序的问题。这个详尽的教程将介绍每个浏览器都应提供的超过 15 种有效的调试方法，以及向您展示如何使用它们的代码示例。
浏览器调试技巧列表
- 检查元素
inspect element 工具是浏览器调试的基石。它允许您即时查看和编辑 html 和 css。
如何使用
右键单击网页上的任何元素。
从上下文菜单中选择“检查”或“检查元素”。
开发者工具面板将打开，显示 html 结构和关联的 css 样式。
示例
假设您想动态更改按钮的颜色。
<button id="mybutton" style="color: blue;">click me!</button>
右键单击按钮并选择“检查”。
在样式窗格中，更改颜色：蓝色；颜色：红色；.
按钮颜色会立即更新。
- 控制台日志记录
控制台是您记录信息、错误和警告的最好朋友。
如何使用
打开开发者工具（通常是f12或右键单击并选择“inspect”）。
导航到“控制台”选项卡。
在 javascript 代码中使用 console.log()、console.error() 和 console.warn()。
示例
console.log("this is a log message."); console.error("this is an error message."); console.warn("this is a warning message."); - 断点
断点允许您在特定行暂停代码执行以检查变量和调用堆栈。
如何使用
打开开发者工具。
导航到“来源”选项卡。
点击要设置断点的行号。
示例
function calculatesum(a, b) { let sum = a + b; console.log(sum); return sum; } calculatesum(5, 3); 在 let sum = a + b; 上设置断点。
执行函数。
执行将暂停，允许您检查变量。
- 网络面板
网络面板可帮助您监控网络请求和响应，包括状态代码、标头和有效负载。
如何使用
打开开发者工具。
导航到“网络”选项卡。
重新加载页面以查看网络活动。
示例
fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)); 打开网络面板。
执行获取请求。
检查请求和响应详细信息。
- 来源地图
源映射将缩小的代码链接回原始源代码，使调试更容易。
如何使用
确保您的构建工具生成源映射（例如，使用 webpack）。
打开开发者工具。
导航到“sources”选项卡查看原始源代码。
示例（webpack 配置）
module.exports = { mode: 'development', devtool: 'source-map', // other configurations }; - 本地覆盖
本地覆盖允许您对网络资源进行更改并立即看到效果，而无需修改源文件。
如何使用
打开开发者工具。
导航到“来源”选项卡。
右键单击文件并选择“保存以覆盖”。
示例
重写 css 文件来更改 div 的背景颜色。
<div id="mydiv" style="background-color: white;">hello world!</div>
保存文件以进行覆盖并更改背景颜色：白色；背景颜色：黄色；.
- 性能面板
性能面板可帮助您分析运行时性能，包括 javascript 执行、布局渲染等。
如何使用
打开开发者工具。
导航到“性能”选项卡。
点击“记录”开始捕获性能数据。
示例
记录函数执行的性能。
function performheavytask() { for (let i = 0; i <p>分析记录的数据以识别瓶颈。</p> <ol> <li>内存面板</li> </ol><p>内存面板可帮助您检测内存泄漏并分析内存使用情况。</p> <p>如何使用</p> <p>打开开发者工具。</p> <p>导航到“内存”选项卡。</p> <p>拍摄堆快照来分析内存使用情况。</p> <p>示例</p> <p>创建对象并监控内存使用情况。<br></p> <pre class="brush:php;toolbar:false">let arr = []; function createobjects() { for (let i = 0; i <p>在运行 createobjects() 之前和之后拍摄堆快照来比较内存使用情况。</p> <ol> <li>应用面板</li> </ol><p>应用程序面板提供对本地存储、会话存储、cookie 等的深入了解。</p> <p>如何使用</p> <p>打开开发者工具。</p> <p>导航到“应用程序”选项卡。</p> <p>探索“存储”下的存储选项。</p> <p>示例</p> <p>将数据存储在本地存储中并检查它。<br></p> <pre class="brush:php;toolbar:false">localstorage.setitem('key', 'value'); console.log(localstorage.getitem('key')); 检查应用程序面板中的“本地存储”部分。
- 灯塔
lighthouse 是一个用于提高网页质量的开源工具。它提供性能、可访问性、seo 等方面的审核。
如何使用
打开开发者工具。
导航到“灯塔”选项卡。
点击“生成报告”。
示例
在示例网页上运行 lighthouse 审核并查看结果以获取改进建议。
- 移动设备模拟
移动设备模拟可帮助您测试 web 应用程序在不同设备上的行为。
如何使用
打开开发者工具。
单击设备工具栏按钮（电话图标）以切换设备模式。
从下拉列表中选择一个设备。
示例
模拟移动设备并检查响应式布局如何适应。
<div class="responsive-layout">responsive content</div>
- css 网格和 flexbox 调试
现代浏览器提供了可视化和调试 css grid 和 flexbox 布局的工具。
如何使用
打开开发者工具。
导航到“元素”选项卡。
单击“grid”或“flexbox”图标以可视化布局。
示例
调试 css 网格布局。
.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .item { background-color: lightblue; padding: 20px; } <div class="container"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> </div> 使用grid调试工具可视化布局。
- 辅助功能检查器
辅助功能检查器可帮助您识别并修复 web 应用程序中的辅助功能问题。
如何使用
打开开发者工具。
导航到“元素”选项卡下的“辅助功能”窗格。
检查元素是否存在可访问性违规。
示例
检查按钮元素的可访问性。
<button id="mybutton">click me!</button>
辅助功能窗格将提供见解和建议。
- javascript 分析器
javascript profiler 通过收集运行时性能数据来帮助您分析 javascript 代码的性能。
如何使用
打开开发者工具。
导航到“profiler”选项卡。
单击“开始”开始分析。
示例
分析函数的执行以查找性能瓶颈。
function complexcalculation() { for (let i = 0; i <p>分析分析结果以优化功能。</p> <ol> <li>调试异步代码</li> </ol><p>调试异步代码可能具有挑战性，但现代浏览器提供了有效处理它的工具。</p> <p>如何使用</p> <p>打开开发者工具。</p> <p>使用“源”选项卡中的“异步”复选框在异步代码中设置断点。</p> <p>使用“调用堆栈”窗格来跟踪异步调用。</p> <p>示例</p> <p>调试异步获取请求。<br></p> <pre class="brush:php;toolbar:false">async function fetchData() { try { let response = await fetch('https://api.example.com/data'); let data = await response.json(); console.log(data); } catch (error) { console.error("Error fetching data:", error); } } fetchData(); 在 fetchdata 函数内部设置断点并跟踪异步执行。
结论
掌握这 15 种强大的调试技术可以显着提高您的生产力和效率
网络开发人员。从检查元素和控制台日志记录等基本工具到 javascript 分析器和异步调试等高级功能，每种技术都提供独特的见解和功能，帮助您构建更好的 web 应用程序。
通过利用这些浏览器调试技术，您将有能力应对遇到的任何挑战，确保您的 web 应用程序健壮、高效且用户友好。调试愉快！
