浏览器开发者工具的使用

背景

在网页开发的时候, 不管是前端开发还是后端开发, 当我们的代码出现问题或者预期的效果没有达到的时候, 我们应第一时间打开开发者模式来查看, 浏览器开发者工具为我们提供解决问题的思路

打开开发者模式

1. 方法1 :调用F12 ( 笔记本用 fn+F12)
2. 方法2: 右上角–>更多工具–>开发人员工具
3. 方法3: 右键–>检查

主要内容

其中核心要素是元素 , 控制台 , 源代码, 网路

元素(Elements)

查看或修改Html属性, Css属性, 监听事件, 断点等

查看元素代码: 点击左上角的箭头图标进入选择元素模式, 然后从页面中选择需要查看的元素, 具体用法如下
例如想把百度页面的左上角的样式拿过来用:

打开开发这模式, 进入选择元素模式

具体代码如下:

更多的属性代码在右侧

修改元素的代码与属性
点击元素–>右键菜单: 编辑元素代码, 修改属性

选择编辑为Html 然后修改新闻的标签, 再观察页面的变化


当然, 这仅仅是临时性修改, 如果刷新一下马上打回原形的了
还可以用相同的方法进行添加属性, 修改属性, 删除等操作

除了复制要素, 还可以复制他的样式

控制台(Console)

一般用于执行一次性代码, 查看JavaScript对象, 查看日志信息和报错
可以当作JavaScriptAPI使用

例如, 在控制台输入Math, 按回车则可以出现很多对应的属性和方法, 可以拿来当帮助文档来用

除此之外, 还可以当成控制台输出, 使用的是Js代码的console.log()输出显示, 作调试使用

也可以直接在控制台上面写代码运行

源代码(sources)

查看html页面,CSS, JavaScript的源代码, 可以调试JavaScript源代码, 给JavaScript添加断点
当点击源代码(sources)的时候可以看到所有代码的源文件

添加断点
在源代码左边有行号, 点击对应的行号, 就可以添加对应的断点

网路(Network)

主要查看与网路相关的信息, 请求响应相关的内容

记录资源请求:按钮处于打开状态时(红色)会在此面板进行网络链接的信息记录
清除按钮: 清楚当前的网络连接记录信息
过滤器(Filter): 其作用是打开过滤面板

主体部分

名称(name): 请求资源的名称或者url路径

状态(status): 状态码

类型(type): 请求资源的MIME(html, css, JavaScript)类型

发起程序(Initiator): 解释请求是怎么发起的

• preflight: 请求是由页面重定向发送
• Parser :请求由html解析发送
• script : 请求由script脚本发送
• other: 其他过程发送

其中主要看到是名称和状态码, 通过状态码看程序是否运行成功

当我们点击这个文件的时候, 我们可以看见这个文章更具图的信息, 分别是标头(Header), 预览(Preview), 响应(response), 发起程序(Initiator), 计时(Timeing), Cookie

标头包括请求URL, 请求方法, 状态码等信息, 除此之外, 还包括响应头和请求头


js文件预览可以查看相关代码,如果是img文件的预览则可以看到相关图片

响应