Web调试技术（PC端） | 青训营笔记

努力的小Qin
68 阅读2分钟

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

一、本堂课重点内容：

  1. bug与debug
  2. Chorme DevTools

二、详细知识点介绍：

2.1 bug与debug的历史

1947年9月9日，哈佛大学在测试马克II型艾肯中继器计算机的时候，一只飞蛾粘在一个继电器上，导致计算机无法正常工作，操作员把飞蛾移除之后，计算机又恢复了正常运转。于是他们将这只飞蛾贴在了他们当时记录的日志上，并在日志最后写了这样一句话：First actual case of bug being found。这是他们发现的第一个真正意义上的 bug，这也是人类计算机软件历史上发现的第一个 bug。他们也提出了一个词，“debug（调试）”了机器，由此引出了计算机调试技术的发展。

image.png

image.png

No code, No bug

image.png

2.2 前端debug的特点

  1. 多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用等
  2. 多环境：本地开发环境、线上环境
  3. 多工具：Chrome DevTools、Charles、Spy-Debugger、Whistle、vConsole……
  4. 多技巧：Console、BreakPoint、sourceMap、代理等

2.3 Chorme DevTools

1.动态修改元素和样式

image.png

image.png

  • 点击.cls开启动态修改元素的class

  • 输入字符串可以动态的给元素添加类名

  • 勾选／取消类名可以动态的查看类名生效效果

  • 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览

  • Computed 下点击样式里的箭头可以跳转到styles面板中的css规则

可以用以下2种方式强制激活伪类

  1. 选中具有伪类的元素，点击:hov

  2. DOM树右键菜单，选择Force State

2.Console

image.png 3.Source Tab

image.png

image.png

image.png

image.png

image.png

image.png

三、课后个人总结：

了解了Web前端在开发过程中常用的一些Debug的方法，往后自己在编码的过程中可以去进行使用。

四、引用参考：

avatar
文章
阅读
粉丝