Chrome Devtools 介绍

Chrome开发工具(又称DevTools),是一套内嵌在chrome浏览器内部的web编写和调试工具。DevTools提供给web开发人员深入地访问浏览器内部和web应用的机会。DevTools可以有效地 跟踪布局问题 , 设置JavaScript断点 ,以及 进行javascript代码的优化

注意:如果你是一个web开发人员,想要最新版本的DevTools,移应该使用Google Chrome Canary

打开DevTools

要在一个网页或者web application中打开DevTools,可以用下面两种方法:

  1. 选择Chrome浏览器窗口右上角的

    菜单
    菜单
    ,然后选择 工具 > 开发工具

  2. 右键单击任何页面元素>选择 审查元素

DevTools工具将会在你的浏览器的地步打开。还有几种打开Devtools的快捷方式:

  1. 使用 Ctrl + Shift + I (Cmd + Opt + I on Mac)打开DevTools。

  2. 使用 Ctrl + Shift + J (Cmd + Opt + J on Mac)打开DevTools并将焦点移到控制台。

  3. 使用 Ctrl + Shift + C (Cmd + Shift + C on Mac)打开DevTools并将焦点移到检查元素移模式,或者控制检查元素模式开关如果DevTools已经打开了。

更多快捷方式

DevTools窗口

DevTools以任务的种类被组织到窗口顶部的工具栏里。每个工具栏项和相应的面板都有一个特定类型的页面或应用程序信息,包括 Elements , SourceResources 等。

Devtools的颜色选择器
Devtools的颜色选择器

Devtools 中的颜色选择器

总的来说,在Devtools中有8种工具面板:

你可以用快捷方式 Ctrl +[Ctrl + ]进行切换.

查看DOM结构和样式

Elements 面板让你看到一棵 DOM 树,并允许你进行 DOM 元素检验和动态编辑。如果需要确认一些页面的 HTML片段,你会经常访问 Elements 面板。

查看一个h标签
查看一个h标签

查看一个h标签

更多关于查看DOM结构和样式

用控制台工作

JavaScript控制台提供了两种主要功能为开发人员测试web页面和应用程序。在这个地方你可以:

  • 在开发过程中打印诊断信息。
  • 利用shell工具进行DocumentsDevtools的交互。

你可以使用 Console API 提供的控制台日志诊断信息的API。如 console.log()console.profile()

你可以使用 Command Line Api 提供的方法直接在控制台中运行表达式。包括 $() 命令选择元素或者 profile() 进行CPU分析。

在控制台中运行命令
在控制台中运行命令

更多关于控制台

调试javascript

随着JavaScript应用程序的复杂性增加,开发人员需要强大的调试工具来帮助快速发现问题的原因并有效地修复它。Chrome DevTools中有一些有用的工具来帮助我们不那么痛苦地调试JavaScript。

打断点
打断点

更多关于调试javascript

进行网络加载的优化

Network 面板提供了实时的资源请求和网络下载。识别和解决这些超过预期的请求时间是页面优化的重要一步。

Network
Network

更多关于Network

Audits

Audits 面板可以从一个页面加载的时候开始分析一个页面。然后提供降低页面加载时间、增加页面响应的优化建议。
更多见PageSpeed Insights

优化页面渲染

Timeline 面板给你一个完整的关于加载和使用web应用程序或页面的时间花费的信息。所有事件,从解析JavaScript加载资、,计算样式、重新渲染都将绘制于Timeline面板上。

Timeline
Timeline

更多关于优化渲染

javascript && CSS 优化

Profiles 面板可以查看web应用或页面的执行时间和内存使用。这些有助于理解,资源被使用在哪里,帮助优化代码。提供的分析器有:

  • CPU profiler 显示页面的 JavaScript 函数的执行时间.
  • Heap profiler 显示页面的 JavaScript 对象和 DOM 节点内存分配。
  • JavaScript profiler 显示页面脚本的执行时间。
Profiler
Profiler

更多关于如何优化javascript && css 表现

查看存储

Resources 面板可以查看页面上加载的资源. 也可以和 HTML5 DatabaseLocal StorageCookiesAppCache 等进行交互.

Resource 面板
Resource 面板

更多关于Resouces

Further Reading

原文

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,472评论 25 707
  • chrome扩展开发入门教程 最近在开发chrome插件,看到一篇非常适合入门的教程,特记录一下 注:转载 本文首...
    谢大见阅读 6,349评论 1 25
  • 在做前端开发时,我们需要用到一些调试工具用来调试我们的HTML、CSS或者JS代码,俗话说预先善其事必先利其器,这...
    Rella7阅读 23,674评论 0 15
  • 其实昨天在读笑来老师发的,做个精明的时间买卖人还有些小迷茫和沮丧。迷茫和沮丧的是因为笑来老师说的从事服务行业,很难...
    玲玲同学阅读 165评论 0 1
  • 我想说什么又什么都不想说好吧安安静静的刚刚好晚上一起喝酒吧
    五煜阅读 361评论 32 13