作为前端开发者都知道,快捷键F12可以打开chrome调试工具。firefox可以打开firebug工具。“工欲善其事,必先利其器”,对调试工具的掌握,能大大提高我们调试代码的效率。因为我平常chrome用的多,这里就大概介绍下chrome调试工具在windows下的使用,firefox的话就暂时不做介绍。
快捷键
ctrl+o 在Sources面板中打开一个文件(JS,CSS)
ctrl+p 同ctrl+o
ctrl+f 查找当前文件中的关键字
ctrl+shift+f 全局查找关键字
ctrl+shift+e 在控制台运行当前选中的代码片段,这个方法可以用来在控制台中打印出变量或方法的返回值。
ctrl+shift+o 跳转到指定的方法
Elements面板
Elements面板是控制DOM结构和CSS样式的。
位置1:点击后选择页面中的任何元素,就会选中相应的DOM节点
位置2:Toggle Device Mode切换设备模式,可以模拟该页面在各种移动端设备的显示情况。
位置3:Edit as HTML,选中某段html代码后可以直接编辑这段html代码。可以直接拖放节点,*调整位置。也可以拖拽节点到编辑器。
位置4:Delete 直接删除该节点。
位置5:Event Listeners可以查看该元素所绑定的事件。
位置6:"Computed"面板里,点击样式前面的放大镜图标,就可以直接定位到具体的样式。当样式层级较深,继承较多时,对调试页面的样式很有帮助。
Network面板
Network面板是查看网络请求信息的。
位置1:filter过滤器,可在输入框中输入关键字搜索对应请求的文件。
位置2:请求文件的列表里进行了分类,个人常用的是查看XHR的分类,查看Ajax请求。
位置3:设置网络的通信方式。默认"No thirotting"不节流。这里可以设置断网模式,或者模拟3G,4G网络等情况下页面加载的速度。网速可以在"settings"里面设置。
Sources面板
sources面板是调试中最常用的地方。
位置1:查看页面中加载的资源文件
位置2:如果浏览器装了插件,插件所需要的JS文件会在这里显示
位置3:使用ctrl+p/ctrl+o 打开某个文件
位置4:断点的操作
位置5:查看异步请求时所设置的定时器
位置6:点击右边的加号,可以增加监听的变量。不过鼠标放到JS文件中的变量时也会显示对应的值。
位置7:设置各种不同的断点。
当勾选XHR Breakpoints里的any XHR时,页面中触发Ajax请求时都会中断。
当勾选"Event listener breakpoint" 下的 Mouse(鼠标)下的 Click (单击)事件时,触发某个按钮的点击事件就会中断。
位置8:一般线上的代码都是打包后的代码,不利于调试。点击{}后格式化该文件。
Timeline面板
Timeline面板是查看动态流的。在这里可以测试页面的性能问题。比如页面的渲染速度,动画的流畅度等。
位置1:点击这个按钮开始Record,按钮变成红色,再次点击停止记录。
位置2:选择记录生成的图表模式
位置3:需要记录的类型
位置4:fps指每秒的帧数,这个可以衡量页面的渲染速度。如果低于60fps,则页面可能需要优化下了。如果低于30fps,则页面的卡顿现象会比较严重。
位置5:记录期间页面加载的比重。看哪个范围的值特别大,占用时间最长,然后有针对性的优化。
Profiles面板
这个使用较少,先暂时不做介绍。
Resources面板
resources面板展示各种资源文件,包括本地存储,session,cookies,cache等信息
Console面板
console控制台输出信息,console的方法有很多种,包括console.log(),console.info(),console.error(),console.table()等。
Settings 选项
勾选下面这个选项后就会在控制台中打印出所有的Ajax请求地址。
参考资料:
http://get.ftqq.com/5982.get
http://ued.taobao.org/blog/2012/06/debug-with-chrome-dev-tool/
Chrome调试工具简单介绍的更多相关文章
-
[转]chrome浏览器中 F12 功能的简单介绍
本文转自:https://www.cnblogs.com/zhuzhubaoya/p/9758648.html chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己 ...
-
【F12】chrome浏览器中 F12 功能的简单介绍
chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...
-
chrome浏览器中 F12 功能的简单介绍
chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...
-
Android发展简单介绍
Android一词的本义指“机器人”,同一时候也是Google于2007年11月5日宣布的基于Linux平台的开源手机操作系统的名称,该平台由操作系统.中间件.用户界面和应用软件组成,号称是首个为移动 ...
-
Chrome调试工具Developer Tools——前端必备神器
本文链接:https://blog.csdn.net/u012542647/article/details/79401485 今天要给大家介绍一个神器,就是谷歌浏览器(Chorme)自带的前端调试工具 ...
-
不常见但很有用的chrome调试工具使用方法
前面的话 对于chrome调试工具,常用的是elements标签.console标签.sources标签和network标签.但实际上,还有一些不太常见但相当实用的方法可以提高网页调试效率.本文将 ...
-
chrome调试工具高级不完整使用指南(基础篇)
一.前言 本文记录的是作者在工作上面对chrome的一些使用和情况的分析分享,内容仅代表个人的观点.转发请注明出处(http://www.cnblogs.com/st-leslie/),谢谢合作 二. ...
-
浏览器中 F12 功能的简单介绍
chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...
-
Python + selenium + pycharm 环境部署细节 和selenium、Jenkins简单介绍
一.测试体系:Python + selenium + pycharm + Jenkins/docker 环境搭建: 1.安装python 3.4/3.5 2/3.6/ 3.7 2.配置环境变量 3.p ...
随机推荐
-
开发Portlet第二步:如何将Crystal静态Portlet转变成基于测试数据的动态Portlet?
当基于Crystal的静态Portlet开发完成后,在与后台服务联调前,还需要将Portlet转换成基于测试数据的动态Portlet.具体步骤如下: 分步指南 复制Portlet项目,并修改相关的po ...
-
Win10年度更新开发必备:VS2015 Update 3正式版下载汇总
微软在06月27日发布了Visual Studio 2015 Update 3 .在MSDN中微软也提供下载,而且MSDN的Visual Studio 2015 Update 3与官方免费下载的文件是 ...
-
HDU 4121 Xiangqi --模拟
题意: 给一个象棋局势,问黑棋是否死棋了,黑棋只有一个将,红棋可能有2~7个棋,分别可能是车,马,炮以及帅. 解法: 开始写法是对每个棋子,都处理处他能吃的地方,赋为-1,然后判断将能不能走到非-1的 ...
-
POJ 1077 Eight
题意:经典的八数码=3= 3*3的格子,里面有1~8这8个数字,还有一个空格x,移动空格的位置,直到移到1~8按顺序排好,输出移动的序列. 解法:看到题果断写了个广搜……然后T了……百度了一下说广搜虽 ...
-
Day15 HTML补充、初识JavaScript
一.上节回顾 上节回顾: HTML 头部信息:编码.title.style.link(导入css文件) 身体: 内联 块级 --->inline-block(既有内联效果又有块级效果) a标签: ...
-
AngularJS 入门教程 $http is not defined 解决方案
采用从git下载的教程, www.angularjs.cn 版本的 入门教程,在第5步的时候 签出文件: git checkout -f step-5 运行将会提示: $http is not def ...
-
ape 文件 转化为mp3 文件
试了很多软件,最后才发觉 any-audio-converter最好用. 可以吧ape 按 cue切割好,然后转化成 MP3 官网可以免费下载: https://www.any-audio-conve ...
-
Android Fragment 详解(未完...)
版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. 之前写过一篇关于 Fragment 生命周期的文章 ...
-
如何让网站在百度有LOGO展示
什么叫没有了网站logo?准确来说应该是网站索引logo,这个logo确实网站很好的一个展示窗口,我以长沙seo关键词为例,我给大家举例! 我输入长沙SEO,出来的百度索引图,原本所有我标红的框子里都 ...
-
【ocp-12c】最新Oracle OCP-071考试题库(41题)
41.(8-14) choose two View the Exhibit and examine the structure of the ORDERS table. The columns ORD ...