Chrome浏览器不仅可以调试页面、JS、请求、资源、cookie，还可以模拟手机进行调试等等，为开发者提供了很多方便，下面就介绍一下我常用到的调试技巧。

1.chrome浏览页面常用快捷键

Ctrl+N 打开新窗口。
Ctrl+T 打开新标签页。

Ctrl+W关闭当前标签

Ctrl + F4 关闭chrome浏览器

Ctrl+Tab 或 Ctrl+PgDown 切换到下一个标签页。

Ctrl+Shift+Tab 或 Ctrl+PgUp 切换到上一个标签页。

Ctrl+1 到 Ctrl+8 切换到标签栏中指定地位编号所对应的标签页。
Ctrl+9 切换到最后一个标签页。

Ctrl+Shift+T 从头打开前次封闭的标签页。谷歌浏览器可记住比来封闭的 10 个标签页。

F5 刷新页面

Ctrl + F5 强制刷新页面

F12 审查元素

F10设置断点后按此键可以一行一行执行js，在执行的过程中若遇到了一个js函数就可以按F11键跳到那个函数里面去

Ctrl+Shift+Delete:用于显示“清除浏览数据”界面，如下

 

2.打开chrome开发者工具：按F12或者点击右键然后选择审查元素

 

3.Elements标签页:Elements标签页的左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性。

  1. Edit as HTML直接对元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。
  2. Copy可以将HTML代码直接复制下来，在拷贝别人网站上面的HTML代码的时候灰常方便，你懂的~~
  3. Delete node删掉一个HTML Node
  4. Break on可以对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处

Elements标签页的右侧可以对元素的CSS进行查看与编辑修改：

 

  1. Style看HTML元素的样式
  2. Computed可以看元素的盒子模型
  3. Properties看到元素具有的方法与属性，比查API手册要方便得多

 

4.Network标签页:Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。

点击左侧某一个具体请求URL，可以看到该请求的详细HTTP请求情况：

我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息。

  1. Headers请求头信息和响应头信息
  2. Preview预览结果，如果是文件可以查看这个文件；如果是图片可以预览这个图片；如果是从服务器返回来的JSON数据，可以查看格式话后的JSON
  3. Response从服务器返回的响应结果
  4. Cookies请求和响应的Cookie
  5. Timing具体的响应时间


 

5.Sources标签页:sources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容。也可以设置各种断点。对存储的内容进行编辑然后保存也会实时的反应到页面上。

 

 

6.Timeline标签页:注意这个Timeline的标签页不是指网络请求的时间响应情况，这个Timeline指的JS执行时间、页面元素渲染时间（每个信息都怎么看，我没弄懂..）

 

7.Profiles标签页:主要是做性能优化的，包括查看CPU执行时间与内存占用（这个也没弄懂）

 

8.Audits标签页:这个对于优化前端页面、加速网页加载速度很有用哦（相当与Yslow）

点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了

 

9.Console标签页:就是Javascript控制台了

在这个面板可以查看错误信息、打印调试信息（console.log()）、写一些测试脚本，还可以当作Javascript API查看用。

 

10.移动端开发调试:现在新版chrome弹出控制台后如下图，其中的工具对移动端调试非常方便。

在控制台中可以直接模拟手机、调整UA、修改网络连接状态

11.推荐安装的的插件：

json viewer：格式化输出json数据，方便看json数据

二维码生成器：根据当前页面的地址生成二维码

firebug ：这个不说了

Image Downloader for Tumblr：Download images from Tumblr with a single click. 若要一键下载该网页图片，可以试试这个

fireshot： 捕捉网页截图，可以存储为各种格式

有道词典Chrome划词插件 ：方便查看英语单词，呵呵，咋英语不好

YSlow ：分析网页并提供建议去优化网页


参考博客：http://segmentfault.com/a/1190000002439648

chrome自带调试工具介绍的更多相关文章

  1. 【转】天啦噜！原来Chrome自带的开发者工具还能这么用！(提升JS调试能力的10个技巧)

    天啦噜!原来Chrome自带的开发者工具还能这么用! (提升JS调试能力的10个技巧)   Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript ...

  2. 天啦噜！原来Chrome自带的开发者工具能这么用你知道么！

    Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript控制台部分的功能. 我最早写代码的时候,也就是在JS控制台里输出一些服务器返回的内容,或者一 ...

  3. 天啦噜！原来Chrome自带的开发者工具还能这么用！

    作者:余博伦链接:https://zhuanlan.zhihu.com/p/22665710来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. Chrome自带开发者工具. ...

  4. DevTools：Chrome 内置调试工具

    DevTools:Chrome 内置调试工具 2016-08-29 https://developers.google.com/web/tools/chrome-devtools

  5. Linux环境下的GCC编译器与GDB调试工具介绍

    假如现在我们有如下代码需要编译运行和调试.文件名为:test.c #include <stdio.h> int main() { int day, month, year, sum, le ...

  6. Chrome自带恐龙小游戏的源码研究(七)

    在上一篇<Chrome自带恐龙小游戏的源码研究(六)>中研究了恐龙的跳跃过程,这一篇研究恐龙与障碍物之间的碰撞检测. 碰撞盒子 游戏中采用的是矩形(非旋转矩形)碰撞.这类碰撞优点是计算比较 ...

  7. Chrome自带恐龙小游戏的源码研究(完)

    在上一篇<Chrome自带恐龙小游戏的源码研究(七)>中研究了恐龙与障碍物的碰撞检测,这一篇主要研究组成游戏的其它要素. 游戏分数记录 如图所示,分数及最高分记录显示在游戏界面的右上角,每 ...

  8. Chrome自带恐龙小游戏的源码研究(六)

    在上一篇<Chrome自带恐龙小游戏的源码研究(五)>中实现了眨眼睛的恐龙,这一篇主要研究恐龙的跳跃. 恐龙的跳跃 游戏通过敲击键盘的Spacebar或者Up来实现恐龙的跳跃.先用一张图来 ...

  9. Chrome自带恐龙小游戏的源码研究(五)

    在上一篇<Chrome自带恐龙小游戏的源码研究(四)>中实现了障碍物的绘制及移动,从这一篇开始主要研究恐龙的绘制及一系列键盘动作的实现. 会眨眼睛的恐龙 在游戏开始前的待机界面,如果仔细观 ...

随机推荐

  1. Bootstrap中模态框多层嵌套时滚动条问题

    在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...

  2. js面向对象插件的做法框架new goBuy('.cakeItem',{ add:'.add', reduce:'.reduce' },[1,0.7,0.6]);

    /*弹窗购买蛋糕*/;(function(){ var $DialogBg=$(".Dialogbg-Select"); var $Dialog=$(".Dialog-S ...

  3. [Spring]初识Spring-Spring的基础使用-如何通过Bean来实例化？

    Spring框架的基础使用 XML配置信息,Bean的不同实例化方式,注入 实例化 XML文件中的参数设置 1.通过构造器进行实例化(重点,常用方式) <bean name="aCls ...

  4. python模块大全

    python模块大全2018年01月25日 13:38:55 mcj1314bb 阅读数:3049 pymatgen multidict yarl regex gvar tifffile jupyte ...

  5. idea本地安装 lombok插件

    转:https://blog.csdn.net/weixin_41404773/article/details/80689639 idea本地安装 lombok插件 项目中经常使用bean,entit ...

  6. OSPF路由协议（二）

    实验要求:使用OSPF路由协议,使每个路由器都能收集到所有网段 拓扑如下: 配置如下: R1enableconfigure terminalinterface l0ip address 192.168 ...

  7. React native Configuration with name 'default' not found.

    添加插件后出现异常 FAILURE: Build failed with an exception. * What went wrong: A problem occurred configuring ...

  8. mysql时间日期函数总结（转）

    DAYOFWEEK(date)  返回日期date是星期几(1=星期天,2=星期一,……7=星期六,ODBC标准)mysql> select DAYOFWEEK('1998-02-03');  ...

  9. sharpkeys键盘按键重映射

    /********************************************************************** * sharpkeys键盘按键重映射 * 说明: * 键 ...

  10. char *s 和 char s[] 的区别

    最近的项目中有不少c的程序,在与项目新成员的交流中发现,普遍对于char *s1 和 char s2[] 认识有误区(认为无区别),导致有时出现“难以理解”的错误.一时也不能说得很明白,网上也搜了一下 ...