开发者工具sources 开发者工具怎么用

进入开发者工具

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

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

简单使用

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



4. 选中需要修改的元素以及手机端的调试



5. 这里左边可以用来选择元素，右边是手机端调试
7. 盒子模型



8. 这里当你点击你要的元素时就可以通过盒子模型来查看宽高，边距等等
10. 修改设置元素的样式
    第一步点击左边的代码



11. 如何在右边界面进行修改



12. 这里直接双击你要修改的代码就行，这里的修改都是不会对源代码产生影响，刷新下即可
14. 修改元素设置的伪类属性



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



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



21. 控制台



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



25. 这里可以借鉴一下别的网站的设计，有css代码以及js代码，不过一般都是有点多，你可能会看崩溃。。
27. Network
    从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。这里是跟接口有关，跟ajax有关（很后面的内容了）



28. 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（本地存储）以及其他存储方式