Web调试技术｜ 青训营笔记

C2
43 阅读2分钟

文章第一句话为“这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
一、课程内容：

  1. Web 应用使用 Chrome devTools 调试
  2. 移动端 H5 调试
  3. NodeJs 应用调试
  4. 常用代理工具的使用
    二、详细知识点介绍：
    前端的调试的特点：
    1. 多平台：浏览器、hybrid、Node.js、小程序、桌面应用
    2. 多工具：Chrome devTools、Charles
    3. 多环境：本地、线上开发环境
    4. 多技巧：console、SourceMap、代理
  • 动态修改元素和样式
    • 点击.cls开启动态修改元素的class
    • 输入字符串可以动态的给元素添加类名
    • 勾选/取消类名可以动态的查看类名生效的效果
    • 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
    • Computed下点击样式里的箭头可跳转到styles面板中的css规则
      image.png

image.png

  • Console -console.log
    -console.warn
    -console.error
    -console.debug
    -console.info
    image.png
  • Source Tab image.png
  • 断点查看 image.png
  • Scope和栈 image.png
  • 压缩后的代码怎么调试：source map 打开Sources 面板后可以看到主要分成左中右三个面板，左侧面板主要和当前页面的资源相关，在面板中会看到已载入的资源如HTML、CSS、JS 等等档案以资料夹的样子呈现，也可以修改、储存档案改变当前的页面的行为。
    他的原理如下： 代码的映射方式，其实就是建立一份代码、原始码字元位置对照表，并把对照表的路径放在实际执行的代码中来读取，其步骤大概是：
    原始码打包成一行执行码将原始码的每个变数存为阵列将执行码各个字元对应到原始码的行号和阵列位置以VLQ 和Base64 编码产出最终的Source map image.png

四、引用参考：
老师上课的ppt

avatar
文章
阅读
粉丝