Web 调试技术 ｜ 青训营笔记

autumnTop
92 阅读2分钟

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

Web 调试技术 ｜ 青训营笔记

本堂课重点内容：

  1. 动态修改元素和样式
  2. 不同的console输出形式
  3. Sorce Tab
  4. 压缩后的代码如何调试？
  5. NetWork
  6. Application
  7. Performance
  8. Lighthouse
  9. 调试界面修改代码后覆盖

1. 动态修改元素和样式

添加类名 image.png 点击.cls，然后输入类名，上面的标签就会自动添加类名

选中样式跳转到对应的属性 image.png 点击样式就会自动跳转

image.png

2. 不同的console输出形式

let arr = [
    {
        name: 'aa',
        age: 11
    },
    {
        name: 'bb',
        age: 23
    },
    {
        name: 'cc',
        age: 33
    },
]

2.1 console.log

image.png

2.2 console.table

image.png

2.3 console.warn

image.png

2.4 console.error

image.png

3.Sorce Tab

image.png

image.png

image.png

4.压缩后的代码如何调试

通过Soure Map image.png

5.NetWork

image.png

这里可以调试网络速度 image.png

这里可以筛选出我们想要的数据 image.png

这里可以查看文件的网络加载情况 image.png

我们可以点击文件查看里面的请求详细信息 image.png

6.Application

image.png 这里我们可以查看Local Storage、Session Storage、IndexedDB、Web SQL、Cookies

7.Performance

这里可以通过点击左上角的录制按钮，然后我们对页面进行滑动等测试，录制结束后就会展现出如下的面板。一般网页的FPS是60，页面在附近则比较稳定。我们通过如下的信息可以查看出页面的哪些地方优化得不够好，性能有问题。 image.png

8.Lighthouse

这个功能可以评测我们的性能 image.png

9.调试界面修改代码后覆盖

先选择一个空的文件夹，然后上方会弹出授权窗口，选择允许 image.png 源代码：我们直接修改background的颜色为红色 image.png 修改后 image.png 我们打开这个界面就可以看见我们修改后的代码了 image.png 点击这个选项我们可以看见代码中的变化 image.png

avatar
文章
阅读
粉丝