浏览器开发者工具入门笔记

前言：

最近在翻翻慕课网有啥不错的课程：

发现了这个： https://www.imooc.com/learn/1164

想当初最开始学习Web的时候根本知道啥是啥，都是自己捣鼓野路子学的。

这个是免费课，入门还不错吧，无聊就写个笔记啥的。

太基础的我就不写了～🐶

首发于 https://sleepymonster.cn

调试前端样式

控制台太碍事？

可以选择放在哪里 有的时候确实碍事。

添加/修改/删除Dom

先选择到对应的再右键进入编辑的状态

使用控制台快速搜索\引用🔍

使用提供的 document.querySelectorAll('img')

可以使用提供的$xx快速引用

*给DOM中断点调试的操作

这个学到了～

这么使用：加上断点之后在控制台获取到对应的节点去修改，然后就会进入断点～

CSS样式查看与编辑

查看与编辑直接选中看style就好了，需要知道越往下优先级越低

所以下面有些是默认划掉的是因为上面的优先级更高

点击下面的箭头可以来到源文件里面去～

下面的{}是用来格式化代码的～

盒型CSS查看

盒子不仅能看padding等，还可以双击修改

下面的样式是更加细节的。

动态增加类与伪类

这个是设置显不显示状态

对当前节点添加与否一个类

这个可以自己写个规则然后添加到节点上

*CSS数值颜色图形动画

颜色啥的都可以动态调试～

这个学到了～

使用调试控制台

• 运行JavaScript代码，交互式编程
• 查看程序中打印的Log日志
• 断点调试代码Debuging

调试Log日志

文档API： https://developer.mozilla.org/zh-CN/docs/Web/API/Console

*调试JS与断点

爬虫有用～ 使用断点调试

只要不刷新，现在的代码就是你的，随便动～

可以控制源码的话 加一句debugger就会停住

debug的含义：

• 从事件进入
• 直接在左侧打上

当然断点的时候在控制台也可以操作变量， 同样在保证没刷新可以在源码中修改然后重新触发事件

直接打好断点开始触发事件调试：

*使用Snippets来辅助Debugging

注入自己的脚本

* 使用 DevTools 作为代码编辑器

可以把本地的文件拿进来～ 相当于一个IED了

Network网络的一些使用

这个应该看看都懂了吧～🐶

可以模拟请求，看性能啥的。

跳转等仍然保留/是否保留缓存

把保留日志打开/停用缓存

模拟网速

网络排查

可以看到是去/来的网络状况

浅记移动端

发现了个这个，平时没太注意右上角的…