这是我参与「第五届青训营」笔记创作活动的第10天

前言

前端代码 PC 端开发调试有多种方法：

浏览器调试工具：大多数浏览器都带有内置的开发者工具，可以帮助查看和调试前端代码。
开发服务器：使用开发服务器，可以更轻松地在本地环境中进行开发和测试。
命令行工具：使用命令行工具，如 Node.js 和 npm，可以更方便地构建和调试前端代码。
前端框架：使用前端框架，如 React、Vue、Angular 等，可以更方便地管理代码并对其进行调试。
第三方工具：使用第三方工具，如 Chrome DevTools、Firebug 等，可以对前端代码进行更深入的调试。

1.前端开发调试之pc端调试

DevTools 是 Chrome 浏览器内置的开发者工具，可以帮助前端工程师更方便地调试和优化网页。

以下是 DevTools 的一些常用模块：

Elements：提供了对页面 HTML 和 CSS 的实时编辑和检查。
Console：允许您在 JavaScript 代码中运行命令，查看输出，并调试代码。
Sources：提供了对页面 JavaScript 源代码的实时编辑和调试功能。
Network：提供了对网络请求的监控和分析功能，以帮助优化网页的加载速度。
Performance：提供了对页面性能的分析功能，以帮助识别性能瓶颈。
Memory：提供了对页面内存使用情况的分析功能，以帮助识别内存泄漏。
Application：提供了对页面的存储（如 cookie 和 localStorage）、缓存和渲染状态的检查。
Security：提供了对网页安全性的检查功能，如证书验证和内容安全策略（CSP）。

这些模块的功能只是 DevTools 的一部分，它还有很多其他功能和模块，可以根据您的需求来使用。使用 DevTools 可以大大提高前端代码的调试效率，并帮助您在调试过程中更快地找到问题。此外，DevTools 还可以帮助您在调试过程中更快地完成各种任务，例如：

检查页面布局和样式，以确保在各种屏幕尺寸和设备上的正确呈现。
查看和分析网络请求，以确保网页资源的正确加载。
检查 JavaScript 代码的执行情况，以确保代码在不同的浏览器环境中正确工作。
调试 JavaScript 代码，添加断点，查看变量的值，以帮助解决代码问题。

课后作业环节1： console.time() 是 JavaScript 中的一个调试命令，用于开始计时一个命名的时间段。这个命令可以帮助您确定代码片段的执行时间，并且可以与 console.timeEnd() 配对使用，以终止计时并显示结果。

举个例子：

javascript
console.time('loop');
for (var i = 0; i < 100000; i++) {
  // Do something
}
console.timeEnd('loop');

上面的代码会启动一个名为 "loop" 的计时器，然后执行一个循环，最后调用 console.timeEnd('loop') 终止计时并在控制台中显示结果，如下：

makefile
loop: 100ms

这样就可以方便地确定代码片段的执行时间，并且可以通过不断测试来进行优化。

scope闭包&call stack调用栈概念：

Scope 是 JavaScript 中的作用域概念，它定义了变量和函数的可见范围。JavaScript 有全局作用域和局部作用域，并且通过闭包机制，可以在函数内部定义局部作用域。

闭包是一种特殊的函数，它能够访问定义它的函数的作用域内部的变量。这个特殊的函数可以在它被定义时将作用域锁定在内部，并且能够在其他地方调用这个作用域内部的变量。闭包提供了一种保存内部变量状态的方法，可以方便地创建模块或实现特殊功能。

Call Stack 调用栈是 JavaScript 中的一个概念，它表示代码在执行时的调用关系。当代码调用一个函数时，该函数会被推入 Call Stack，在函数返回之前它将一直保持在栈顶。如果在函数内部再调用了另一个函数，该函数将被推入 Call Stack，直到它返回。当 Call Stack 为空时，代码执行完毕。

Call Stack 调用栈可以用于跟踪代码的执行情况，它可以帮助您找到代码的问题并方便地调试。开发者工具中的“调用栈”面板可以直接显示 Call Stack 调用栈的内容，并且可以帮助您确定错误的来源。

此外，Call Stack 调用栈还有一个异常处理的作用。当代码发生错误时，会抛出一个异常，这个异常可以在 Call Stack 调用栈中的任意一层被捕获。通过在代码中使用 try-catch 语句，可以捕获 Call Stack 调用栈中的异常，从而实现对代码错误的处理。

总的来说，Scope 闭包和 Call Stack 调用栈是 JavaScript 中重要的概念，对于前端开发者来说需要深刻理解这两个概念，以便能够更高效地开发和调试代码。

压缩和混淆后的代码如何调试：

压缩和混淆后的代码可以通过使用 Source Map 进行调试。Source Map 可以将压缩后的代码映射回原始代码，从而使得调试变得可能。

具体而言，首先需要生成 Source Map，这可以通过使用一些压缩工具（如 UglifyJS）自动完成。然后，在浏览器的开发者工具中加载 Source Map，并使用断点进行调试。在断点处，浏览器会显示原始代码，从而使调试变得更方便。

总的来说，使用 Source Map 可以使调试压缩和混淆后的代码变得更加简便。但是需要注意的是，Source Map 会对性能造成一定的影响，因此在生产环境中需要删除 Source Map。

课后作业环节2： 课后思考题：既然Source Map可以映射源码，拿压缩后的代码带上Source Map上线不久又不安全了吗？

回复： Source Map 可以帮助浏览器将压缩后的代码映射回原始源码，方便调试和问题排查。然而，在生产环境中将 Source Map 一并上线并不安全，因为它可以提供攻击者对代码实现细节的深入了解。攻击者可以利用这些信息找出代码中的漏洞并利用它们进行攻击。因此，建议在生产环境中禁用 Source Map，或者仅在必要的情况下使用。

推荐使用的工具lighthouse：

Lighthouse 是一个开源的前端性能诊断工具，可以评估网站的性能、可用性和构建质量。Lighthouse 可以作为一个 Chrome 扩展使用，也可以作为一个命令行工具使用，以及作为 DevTools 集成在 Chrome 开发者工具中使用。

Lighthouse 评估网站的性能主要有以下几个方面：

首次加载时间：评估网站在第一次加载时的性能。
总体加载时间：评估网站在加载完成后的性能。
用户体验：评估网站对用户的体验，包括页面的交互性和加载速度。
构建质量：评估网站代码的质量，以及符合最佳实践的程度。

Lighthouse 提供的评估报告非常详细，可以帮助开发者诊断网站的问题，并提供了一些改进建议。

2.前端开发调试之移动端调试：

移动端调试与 PC 端调试略有不同。下面介绍一些常用的移动端调试工具和方法：

开发者工具：与 PC 端类似，部分移动浏览器也支持开发者工具，可以进行网页的检查和调试。
真机调试：通过连接电脑并通过开发者工具进行调试。
模拟器：使用模拟器进行调试，模拟器支持多种操作系统，比如 iOS 和 Android。
Remote Debugging：通过远程调试进行调试，可以在电脑上使用开发者工具进行调试。
通过日志进行调试：通过打印日志并分析日志信息，来诊断问题。

【青训营】前端开发调试

前言

1.前端开发调试之pc端调试

2.前端开发调试之移动端调试：