开发者工具的简单使用

进入开发者工具

这里有两个方法（以chorme浏览器为例）

1. 直接F12
2. 鼠标右键里面点击检查即可
   

简单使用

1. 更改调试窗口的显示位置
   就是你可以调整开发者工具的位置，个人感觉第三个选项比较舒服
   

2. 选中需要修改的元素以及手机端的调试
   
   这里左边可以用来选择元素，右边是手机端调试

3. 盒子模型
   
   这里当你点击你要的元素时就可以通过盒子模型来查看宽高，边距等等

4. 修改设置元素的样式
   第一步点击左边的代码
   
   如何在右边界面进行修改
   
   这里直接双击你要修改的代码就行，这里的修改都是不会对源代码产生影响，刷新下即可

5. 修改元素设置的伪类属性
   

6. 添加新的类，复制和删除原来的类
   

7. 保存修改后的代码
   直接在页面上CTRL + S另存为即可，这种比较暴力，适合F12大幅度修改后的页面。
   也可以对照开发者工具，在WebStorm或VScode代码编辑器中敲上去

8. 看代码
   

9. 控制台
   
   这里主要是跟js有关，当你js里面需要查看代码是否有问题时就需要console.log()来控制台看输出

10. sources
    
    这里可以借鉴一下别的网站的设计，有css代码以及js代码，不过一般都是有点多，你可能会看崩溃。。

11. Network
    从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。这里是跟接口有关，跟ajax有关（很后面的内容了）
    
    1.ontrols 控制Network的外观和功能。
    2.Filters 控制Requests Table具体显示哪些内容。
    3.Overview 显示获取到资源的时间轴信息。
    4.Requests Table 按资源获取的前后顺序显示所有获取到的资源信息，点击资源名可以查看该资源的详细信息。
    5.Summary 显示总的请求数、数据传输量、加载时间信息。

请求资源面板
Name 资源名称，点击名称可以查看资源的详情情况，包括Headers、Preview、Response、Cookies、Timing。
Status HTTP状态码。
Type 请求的资源MIME类型。
Initiator 标记请求是由哪个对象或进程发起的（请求源）。
Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
Time 请求或下载的时间，从发起Request到获取到Response所用的总时间。
Watefall显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息，点击列头则可以根据指定的字段可以排序

12. application
    
    这里跟你存储的数据有关，有local storage（本地存储）以及其他存储方式

剩下就就还没怎么用过，等自己明白了再来补充