这是我参与「第四届青训营 」笔记创作活动的第7天
前端调试的bug
世界上第一个bug来自一只小虫子
本文部分参考来自于前端开发调试最佳实践
前端debug的特点
- 多平台（浏览器、Nodejs、小程序、桌面应用）
- 多环境（本地开发环境、线上环境）
- 多工具（谷歌开发者工具、Charles、Spy-Debugger）
- 多技巧（控制台、断点、代理）
谷歌控制台
1.元素（DOM与CSS调试）
(1).DOM结点
- 搜索结点：Ctrl + F打开搜索工具栏查找DOM树
- 显示标尺：Ctrl + shift + P 打开运行工具栏输入标尺后显示标尺展示图片大小
- 编辑DOM：大部分可以通过直接点击来完成，可以修改内容、属性、结点类型等等
- 强制状态：让结点强制保持一定的状态，比如hover、active等等
- 隐藏结点：H隐藏，再次按下H重新出现
(2).查看DOM对象的属性
- 属性面板
(3).查看与更改CSS
- 为元素添加新类
(4).使用CSS弹性盒子修改布局
- 在样式界面修改
2.控制台（查看记录的消息、运行JavaScript）
(1).过滤消息
- 打开浏览器侧边栏可以看到许多类型的消息，包括浏览器的消息以及用户发出的消息
- 关闭侧边栏显示的是所有消息
- 此时可以在级别中选择需要显示的消息
- 此外还可以通过关键字来搜索想要的消息
(2).格式化控制台消息
类似于C语言中的输入中的格式化方式，以指示数据类型 表格如下：
(3).检查对象属性
- 自己的属性以及继承属性：从原型链继承的属性是常规字体。 控制台通过评估内置对象的相应本机访问器将它们显示在对象本身上
- 可枚举和不可枚举属性：前者在控制台上颜色鲜艳显示，后者则不会突出显示
- 私有属性：指定私有属性前加** # **标识符
- 内部属性：
1.集合、（映射和集合）具有
[[Entries]]包含其键控条目的属性 2.promise对象：[[PromiseState]]：待处理、已完成或已拒绝[[PromiseResult]]:undefined如果待定，<value>如果满足，<reason>如果被拒绝 3.proxy对象：[[Handler]]目的，[[Target]]对象，和[[isRevoked]]（关闭与否）。 4.函数：[[FunctionLocation]]. 指向源文件中函数定义行的链接。[[Scopes]]. 列出函数可以访问的值和表达式。
(4).控制台API参考
-
console.dir(document.head)(打印指定的对象的JSON表示) -
console.error("I'm sorry, Dave. I'm afraid I can't do that.");
- consol.group、console.info(控制台标签、组)
(5).控制台实用程序API
- $选择器，用来选择标签类型的第一个元素，例如div则选择第一个div，当使用一个参数调用时，此函数是 document.querySelector() 函数的别名
- （$$）选择器，选择一组标签类型的元素，此命令等效于调用 document.querySelectorAll()
- copy（object）将指定对象的字符串表示复制到剪贴板。
- 监视器函数monitor：当调用指定的函数时，控制台会记录一条消息，指示函数名称以及在调用函数时传递给函数的参数。
- 监视器事件（以监控改变窗口大小为例）
monitorEvents(window, "resize");
事件类别：
- 查询对象 queryObjects(Constructor)从控制台返回使用指定构造函数创建的对象数组。
