前端开发的调试知识

嘿谁用了我名字
389 阅读8分钟

动态修改元素和样式

步骤：

  1. 打开浏览器
  2. 右键->检查/直接按F12

Element

  1. 开启动态修改元素的class->点击.cls
  2. 调试伪类hover等->选中元素右键force state/直接点击:hov
  3. 搜索想要调试的样式->computed->Filter搜索->在结果点击箭头找到对应的样式
  4. 截屏网页->点击body->右键capture node screenshot

Console

  1. console.log->将内容输出在控制台
  2. console.warn->在控制台输出警告信息
  3. console.error->将错误信息输出到控制台
  4. console.debug->控制台模块的内置应用程序编程接口，用于将消息打印到换行符中的stdout,谷歌浏览器和opera不支持
  5. console.info->用于在控制台输出信息
  6. console.table->具象化的展示JSON和数组数据
  7. console.dir->通过类似文件树的方式展示对象的属性
  8. 占位符->给日志添加样式，可以突出重要的信息
  • %s:字符串占位符；
  • %o:对象占位符；
  • %c:样式占位符；
  • %d:数字占位符

Sourse

1. 布局

image.png

  • pages->页面源代码->最右边是debug工具栏和断点调试器
  • debug工具栏从左到右：暂停（继续）->单步跳过->进入函数->跳出函数->单步执行->激活（关闭）所有断点->代码执行异常处自动

2. 断点调试

  • 在源代码处写debugger;/在代码预览区域点击行号设置断点
  • 执行到断点处代码暂停执行
  • 展开breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
  • 暂停状态下，鼠标hover变量可以查看变量的值
  • 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值

3. 展开Scope可以查看作用域列表（包含闭包）

闭包是捆绑在一起（封闭）的函数与对其周围状态（词法环境）的引用的组合。换句话说，闭包使您可以从内部函数访问外部函数的范围。在 JavaScript 中，每次创建函数时都会在创建函数时创建闭包。

代码示例：

function init() {
  var name = 'Mozilla'; // name is a local variable created by init
  function displayName() {
    // displayName() is the inner function, a closure
    console.log(name); // use variable declared in the parent function
  }
  displayName();
}
init();

该displayName()函数没有自己的局部变量，但是，由于内部函数可以访问外部函数的变量，displayName()可以访问父函数中声明的变量name

4. 展开Call Stack可以查看当前javaScript代码的调用栈

调用堆栈是解释器（如 Web 浏览器中的 JavaScript 解释器）跟踪其在调用多个函数的脚本中的位置的机制——当前正在运行什么函数以及从该函数中调用了哪些函数等.

  • 当脚本调用函数时，解释器将其添加到调用堆栈中，然后开始执行该函数。
  • 由该函数调用的任何函数都被添加到调用堆栈中，并在调用到达的地方运行。
  • 当前函数完成后，解释器将其从堆栈中取出并从上一个代码列表中停止的位置继续执行。
  • 如果堆栈占用的空间多于分配给它的空间，则会导致“堆栈溢出”错误。 示例代码：
function greeting() {
   // [1] Some code here
   sayHi();
   // [2] Some code here
}
function sayHi() {
   return "Hi!";
}

// Invoke the `greeting` function
greeting();

// [3] Some code here

上面的代码会这样执行：

  1. 忽略所有函数，直到到达greeting()函数调用。
  2. 将greeting()函数添加到调用堆栈列表。
注意： 调用堆栈列表：-greeting
  1. 执行greeting()函数内的所有代码行。
  2. 进入sayHi()函数调用。
  3. 将sayHi()函数添加到调用堆栈列表。
注意： 调用堆栈列表：-sayHi-greeting
  1. 执行sayHi()函数内的所有代码行，直到结束。
  2. 将执行返回到调用的行sayHi()并继续执行greeting()函数的其余部分。
  3. sayHi()从我们的调用堆栈列表中 删除该函数。
注意： 调用堆栈列表：-greeting
  1. 当greeting()函数内部的所有内容都执行完毕后，返回到它的调用行继续执行其余的 JS 代码。
  2. greeting()从调用堆栈列表中 删除该函数。
注意： 调用堆栈列表：EMPTY

总之，我们从一个空的调用堆栈开始。每当我们调用一个函数时，它都会自动添加到调用堆栈中。一旦函数执行了它的所有代码，它就会自动从调用堆栈中删除。最终，堆栈再次为空。

调试压缩后的代码

1. Source Map

概况
  1. 简单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。
  2. 有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。
  3. 目前，暂时只有Chrome浏览器支持这个功能。在Developer Tools的Setting设置中，确认选中”Enable source maps”。
生成Source Map(Google的Closure编译器)

生成命令的格式如下：

java -jar compiler.jar \ 
　　--js script.js \
　　--create_source_map ./script-min.js.map \
　　--source_map_format=V3 \
　　--js_output_file script-min.js

各个参数的意义如下：

  • js： 转换前的代码文件
  • create_source_map： 生成的source map文件
  • source_map_format：source map的版本，目前一律采用V3。
  • js_output_file： 转换后的代码文件。
启用

在转换后的代码头部或尾部加上一行：

//# sourceMappingURL=/path/to/file.js.map

或者

/*# sourceMappingURL=/path/to/file.js.map */

map文件可以放在网络上，也可以放在本地文件系统。

格式

Source Map文件：

{
　　　　version : 3,
　　　　file: "out.js",
　　　　sourceRoot : "",
　　　　sources: ["foo.js", "bar.js"],
　　　　names: ["src", "maps", "are", "fun"],
　　　　mappings: "AAgBC,SAAQ,CAAEA"
　　}

整个文件就是一个JavaScript对象，可以被解释器读取。它主要有以下几个属性：

  • version：Source map的版本，目前为3。
  • file：转换后的文件名。
  • sourceRoot：转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。
  • sources：转换前的文件。该项是一个数组，表示可能存在多个文件合并。
  • names：转换前的所有变量名和属性名。
  • mappings：记录位置信息的字符串。
mappings属性

转换前后的代码一一对应的关键，就是map文件的mappings属性。mappings字段存储了源文件和Source Map的映射。

  1. 第一层是行对应，以分号（;）。
  2. 第二层是位置对应，以逗号（,）表示。
  3. 第三层是位置转换，以VLQ编码表示，代表该位置对应的转换前的源码位置。 举例：
mappings:"AAAAA,BBBBB;CCCCC"

转换后的源码分成两行，第一行有两个位置，第二行有一个位置。每个位置使用五位，表示五个字段。从左边算起，

  • 第一位，表示这个位置在（转换后的代码的）的第几列。
  • 第二位，表示这个位置属于sources属性中的哪一个文件。
  • 第三位，表示这个位置属于转换前代码的第几行。
  • 第四位，表示这个位置属于转换前代码的第几列。
  • 第五位，表示这个位置属于names属性中的哪一个变量。 如果某个位置是AAAAA，由于A在VLQ编码中表示0，因此这个位置的五个位实际上都是0。它的意思是，该位置在转换后代码的第0列，对应sources属性中第0个文件，属于转换前代码的第0行第0列，对应names属性中的第0个变量。

2. 使用SourceMap来进行压缩后的代码调试

chrome dev-tools设置->settings->general->Enable JS source maps/Enable CSS source maps->刷新页面->dev-tools->sources展开文件所在目录->展开转换后的代码文件所在目录->就会看到压缩前的js文件->然后在原文件打断点->进行调试

NetWork

布局 image.png

Application

  1. 布局 image.png

  2. 概况

Application面板展示与本地存储相关的信息

  • Local Storage：作为本地存储来使用，解决了cookie存储空间(每条cookie为4k)不足的问题，属于永久性存储
  • Session Storage：属于当前会话结束的时候，键值对会被清空
  • IndexedDB：浏览器可以存储更多的数据，IndexedDB是面向对象的，存储的是Javascript对象
  • Web SQL：用于存储或管理数据库中数据的网页，Google Chrome、OPera和Android浏览器都支持
  • Cookie：用于存储服务器返回给客户端的信息，客户端进行保存，可以实现自动登录，保存游览历史，身份验证等信息

Performance

image.png

Lighthouse

image.png

Web核心指标

  • Largest Contentful Paint(LCP):最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5s内发生。
  • First Input Delay(FID):首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100ms或更短。
  • Cumulative Layout Shift(CLS):累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1或更少。
avatar
文章
阅读
粉丝