调试工具的使用

在程序代码中寻找错误叫做代码调试。调试很难，但幸运的是，很多浏览器都内置了调试工具。

内置的调试工具可以开始或关闭，严重的错误信息会发送给用户。

1.1 调试窗口介绍

1.1.1 开启

windows系统f12、Mac系统command + shift + c

1.1.2 功能

名称 描述
指针 选择页面中的元素
手机 使用移动端界面调试
Elements 元素面板，查看Web页面的HTML与CSS，可以双击元素，对当前页面进行修改
Console 控制台面板，可以作为shell在页面上与JaveScript交互。注意：控制台与该页面是一个整体，在控制台中的任何操作，会影响到页面
Sources 源代码面板，可以设置断点来调试JaveScript
Network 网络面板，可以明确的查看到访问Web页面所产生的全部请求（包括应答状态、响应时间、数据量等信息）和下载的资源文件，并可以模拟不同的网络状态（在线、离线、3G等）下对Web的加载情况，可以用于分析和优化网页加载性能
Performance 性能面板，记录和查看Web页面在浏览器中运行时的性能表现（注意是运行时，而不是加载时），主要用于发现Web页面运行时性能瓶颈和性能调优
Memory 内存面板，记录执行JS函数对CPU和内存的使用情况，可以识别开销大的JS函数，跟踪内存泄露，帮助代码优化，提高JS执行性能
Application 应用面板，记录Web页面加载的所有资源信息，包括IndexedDB与Web SQL数据库、本地和会话存储、cookie、应用程序缓存、图像、字体、JS脚本和样式表
Security 安全面板，查看Web页面的安全和认证情况，确保网站上正确地实现了HTTPS
Audits 审计面板，从性能（Performance）、PWA兼容性（Progressive Web App）、可访问性（Accessibility）、最佳实践（Best Practices）、搜索引擎优化（SEO）这五个维度给你的网站打分，并给出一份评估报告和优化建议，可以说是非常的强

1.2 console.log调试

可以使用 console.log() 方法在调试窗口上打印 JavaScript 值，来调试

1.3 断点调试

在Source面板中，我们可以设置断点 (代码停止执行的位置)，且可以在代码执行时检测变量。

Source面板：左侧资源区、中部工作区、右侧控制台

1.2.1 设置断点技巧

  1. 逐步与逐过程混合
  2. 断点加继续运行
  3. 条件断点(右键添加 add contitional breakpoint)

1.2.2 debugger关键字

debugger 关键字用于停止执行 JavaScript，并调用调试函数。

这个关键字与在调试工具中设置断点的效果是一样的。

注意：如果没有调试可用，debugger 语句将无法工作。

var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x; // 开启 debugger ，代码在本行前停止执行。

1.2.2 执行控制

  1. 逐过程运行，一次运行一个函数

  2. 单步运行(逐步运行)，一次运行一句，如果是函数，进入函数体内运行

  3. 继续运行，从当前状态运行下去, 直到出现断点, 如果没有断点则运行结束

1.2.4 Watch

利用 watch 监视窗口跟踪监控变量，点击"+"号添加变量名，可以查看对象成员

1.2.5 小技巧

  • 工作区左侧行号下方的{}，点击可以格式化调试代码
  • 配置Framework Ignore List：调试器将跳过脚本，并且不会在抛出异常时停止
    • 工作区源码，右键选择Add Script to ignore list
    • 在DevTools的Settings中的Ignore List选项卡中手动设置

results matching ""

    No results matching ""