当前位置:首页 > 浏览器使用小技巧 > 谷歌浏览器下载 发布时间:2016年10月05日 20:23:38

谷歌Chrome浏览器开发者工具使用教程

首先,我们来了解下谷歌Chrome浏览器开发者工具有什么用处,开发者工具就是给WEB应用开发或者网站开发者提供程序调试的工具,帮助开发人员调试网页布局、调试脚本(JavaScript、jQuery)之类的,还可以查看网页加载过程、网页抓包等。

其次我们来看谷歌浏览器开发者工具怎么打开,首先,我们可以按F12键,可以直接打开谷歌浏览器开发者工具面板;如果是要调试网页中某个位置的话,可以在该位置点击鼠标右键,然后在弹出菜单里点击 检查 按钮,可以针对制定位置进行调试。
打开谷歌浏览器开发者工具

谷歌浏览器开发者工具
请留意上图中红色框框,我们从左上角第一个红色框框开始讲起,
第一个框:是用于屏幕适配的,也就是传说中的chrom能够调试各种移动设备的屏幕分辨率。
Element标签:该标签使用来查看页面的HTML标签元素的,能够也就是查看源码,我们可以看到布局,可以看到用到的样式,还有用到的链接等等。
console标签:这个就是一个web控制台。
sources标签:这个是显示资源文件的

调试前段代码
1.该选择框使用来选择资源的,当网页被加载的时候向服务器端请求出来的文件包括.html .ccs .js这样的文件。
2.这个地方使用来调试js代码的地方,这个非常重要,看到行号上面有蓝色的标签,这个标签就是断点,当我们需要调试程序的时候打一个断点,然后通过3这个工具栏进行调试。
3.中的标签,第一个是停止状态的按钮就是表示程序是否停止(在debug时),后面的是程序继续跳过方法,跳过下一个语句,调到上一个语句。

Network标签:这个就是抓包常用的工具
谷歌浏览器抓包工具
我们需要分析页面的请求,比如模拟登陆什么的都需要去分析程序是怎么在后台执行的,接下来就,我们可以看到Headers(请求消息头) Preview(预览) Response(响应) Timing(求求时间)Cookie这些东西。最上面还有一个工具栏,有一个红色的圆点和静止符号的按钮,那么这两个按钮,当为红色按钮的时候表示当前的请求不被清空(但是这里的请求是不跳转页面的请求,当跳转到新的页面,那么也会请求也会被清空),后面这个按钮就是清空请求的。

TimeLiness标签:这个就是我们上面讲的请求时间,那么后面的几个标签也不是很常用,我就不做过多的说明,现在我们已经了解谷歌浏览器开发者工具的入门使用知识,基本也就够用,我相信这些功能都用熟之后你也会知道其他的功能怎么使用。


发表评论:

浏览器下载列表(非排名排序)
浏览器好不好用(附专业评测)
浏览器使用方法教程大全
麦迪浏览器下载排行榜栏目列表
  • 浏览器排行
  • 浏览器官方下载
  • 哪个浏览器最好用
  • 浏览器首页怎么改
  • 浏览器缓存怎么清理
  • 浏览器怎么用迅雷下载
  • 如何下载网页视频
  • 浏览器收藏夹导入导出
  • 浏览器扩展插件下载
  • 代理浏览器下载
  • 浏览器广告拦截软件下载
  • 浏览器使用小技巧
  • 手机浏览器软件下载
  • 手机浏览器哪个最好用
  • 手机浏览器排行榜
  • 浏览器兼容模式
  • 浏览器升级
  • 如何卸载浏览器
  • 电视浏览器tv版下载
  • 微信浏览器下载
  • 浏览器评测