基本介绍

2019-02-28 10:00:26
linefo
454
最后编辑:linefo 于 2019-02-28 11:21:46


基本是Web开发人员必备的工具了,快捷键F12,或者ctrl+shift+i,也可以从更多工具里面找到。


本介绍基于chrome的69.0.3497.100版本。


1、前言


列一些使用情况方便理解

(1)可以通过在Elements面板对元素的改动立即看到效果,非常方便。

(2)调试接口时,可以在Network面板清楚看到提交过去的值和返回值的情况。

......


2、开发者工具界面介绍


(1)页面元素选择器

点击按钮以后,鼠标就变成一个选择器了。点击网页上的任意一个html元素,会切换到Elements面板并标识出你选择的元素。


(2)设备模拟开关

点击按钮以后,可以在PC以及移动设备间切换。

当切换成移动设备后,访问网页时会自动携带移动设备信息使得网页按照移动设备的情况来解析。

切换到移动设备后,浏览器上方出现了一个工具栏,从左到右功能分别是:设备选择(自定义或特定)、分辨率设置、缩放百分比、???、旋转(横屏或竖屏)


(3)功能面板

开发者工具主要就是下面这些面板了,选择不同的面板,下放会出现不同的工作显示区,具体的后面再解析。


(4)更多功能

Dock side:选择开发者工具的显示方式,从左到右分别是单独窗口、左边、下面、右边。

其他略(以后用到再补充)