chrome开发者工具最常用的四个功能模塊:
-
Elements:主要用来查看前面界面的html的Dom结构和修改css的样式。css可以即时修改即使显示。大大方便了开发者调试页面这真是十分友好的~
-
console:这個除了查看错误信息、打印调试信息(
is:当前时间点在执行的请求。当前可用值:running
-
当选择保留日志重新加载url当前界面时,之前请求显示的資源信息会保留下来,不会清空的哟~
-
当打开开发者工具时生效打开这个开关,则页面资源不会存入缓存可以从Status栏的状态码看文件请求状态。
-
设置模拟限速如下图所示。
设置限速可以模拟处于各种网络环境下的不同用户访问本页面的情况
下列介绍中,前者为名词解釋后者为举例
-
Initiator:解释请求是怎么发起的,有四种可能的值
-
2.Redirect:请求是由页面重定向发送
-
4.other :请求是由其他过程发送的比如页面里的Link链接点擊
-
-
size/content:size是响应头部和响应体结合的大小,content是请求解码后的大小
点击某个具体请求后的界面如下图所示:
Header面板列出资源的请求url、HTTP方法、响应狀态码、请求头和响应头及它们各自的值、请求参数等等
-
Preview:预览面板,用于资源的预览
Response:响应信息面板包含资源还未进行格式处理的内嫆
Timing:资源请求的详细信息花费时间
对某请求右键,出现页面如下图所示
-
cURL:将网络请求作为一个curl的命令字符复制到系统剪贴板(curl是一种开源嘚命令行工具和库,用于配合url语法进行数据传输)
-