顾名思义Chrome开发工具就是一个工具,它允许Web开发人员可以通过浏览器应用程序干预和操作Web页面,也可以通过这个工具调试和测试Web页面或Web应用程序。有了这个工具,你可以做很多有趣的事情:

  • 调试界面的问题
  • 使用断点调试JavaScript代码
  • 优化你的代码

打开开发者工具,你只需要在页面的任意位置右击鼠标,选择检查元素或从右上角菜单中选择“工具>更多工具>开发者工具“。

下面示例演示的都是在Google Chrome的Canary浏览器下做的演示。

快速编辑HTML元素

试一试:

  • 选择”Elements”面板
  • 选择”Elements”面板内的一个DOM元素
  • 双击你需要打开的DOM元素标签,你就可以编辑它

当你完成之后会自动更新和关闭标签

到指定的行数

你可以在“Sources”面板中选择指定的文件中使用“:行数:列数”的功能。试试快捷键CMD + O

展开所有子节点

试一试:

  • 选择”Elements”面板
  • 选择DOM元素和在带有剪头的地点按住Alt +点击鼠标左键,可以展开所有子节点

改变开发者工具位置

试一试快捷键:CMD + Shift + D。设置开发者工具有三个选项:

  • 不在窗口中显示开发者工具
  • 在窗口右侧显示开发者工具
  • 在窗口底部显示开发者工具

通过CSS选择器搜索DOM元素

试一试快捷键:CMD + F / CTRL + F和输入你需要的类名或ID名,可以搜索到相应的选择器。

Material和自定义颜色调色板

你可以点击颜色代码前面的小图标,你可以选择:

  • 页面颜色:这个面板是从你的Web网站(在你的CSS中)自动生成
  • Material Design:这个面板可以从Material Design面板中自动生成颜色

多个光标

移动光标按住CMD + 点击可以添加多个光标,你也可以使用CMD + U撤销你选择的最后一个光标。

复制图片的Data URI

  • 选择”Network”面板
  • 在“Resources”面板选择你的图片
  • 在图片上右击,选择“Copy Image as Data URI”选项

触发伪类

  • 在左边的面板元素上右击鼠标,并选择“Force Element State”
  • 另外在右边的面板中选择切换伪类状态的图标

通过拖拽选择多列

  • 选择“Sources”面板
  • 在“Sources”面板编辑器中选择你需要的文件
  • 按住Alt并拖动鼠标

使用$0获取当前元素

  • 选择“Elements”面板
  • 在”Element”面板中选择DOM元素
  • 点击”Console”并输入$0可以获取当前元素

在元素中显示

选择一个DOM节点:

  • 在“Console”面板中右击
  • 选择”Reveal in Elements Panel”

查看事件监听器

  • 选择“Elements”面板”
  • 在“Event Listeners”菜单中选择一个事件
  • 右击并选择“Show Function Definition”,你可以查看到对应的源码

预览Easing

  • 点击easing图标(紫色的图标),可以预览easing
  • 你可以通过浏览选择其他的easing或者自定义easing

媒体查询

  • 点击左上角的手机图标,选择设备模式
  • 点击断点(“blue”,”green”,”orange”)工具栏选择断点

如果你可击一个工具栏,你可以在源码中找到它对应的位置。

Network Filmstrip

Film Strip”显示页面从开始到结束渲染的截图。你可以点击截图和在timeline-style中查看视图。

  • 选择“Network”面板
  • 点击“录制”图标
  • 重新加载页面

Copy Response

你可以在网络资源中复制”Response/Request”头。

  • 选择“Network”面板”
  • 在“Sources”面板编辑器中选择你需要的文件”
  • 右击并选择“Copy Response”

运行预定义的代码片段

  • 在左侧边栏中选择: Sources > Snippets
  • 右击选择Select New
  • 输入文件名和在右侧的面板中输入代码片段
  • 代码片段文件名上右击选择Run

Device Emulation Sensors

你可以模拟移动设备传感器:

  • 触摸屏
  • 地理位置坐标
  • 加速计

你可以这样操作:

  • 选择“Elements”面板
  • 选择“Emulation > Sensors”和点击“Esc”取消

Workspaces

  • 选择“Sources”面板
  • 在Sources面板中右击并选择“Add Folder to Workspaces”
  • 选择你的文件和右击,并选择Map to Network Resources
  • 修改你的文件代码和查看

如何更专业的使用Chrome开发者工具的更多相关文章

  1. 12.04 如何更专业的使用Chrome开发者工具

    顾名思义Chrome开发工具就是一个工具,它允许Web开发人员可以通过浏览器应用程序干预和操作Web页面,也可以通过这个工具调试和测试Web页面或Web应用程序.有了这个工具,你可以做很多有趣的事情: ...

  2. Chrome开发者工具不完全指南:(三、性能篇)

    卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需 ...

  3. Chrome开发者工具不完全指南(四、性能进阶篇)

    前言 Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化,简单来说它就是Timeline的数字化版本.它的功能选项卡不是很多(只有三个),操作起来比较前面的几块功能版本来说简单 ...

  4. Chrome开发者工具详解(4)-Profiles面板

    Chrome开发者工具详解(4)-Profiles面板 如果上篇中的Timeline面板所提供的信息不能满足你的要求,你可以使用Profiles面板,利用这个面板你可以追踪网页程序的内存泄漏问题,进一 ...

  5. Google Chrome开发者工具

    Google Chrome开发者工具 是内嵌到浏览器的开发工具,打开方式有两种:第一“按F12”,第二:shift+ctrl+i(火狐.360等浏览器也可以这么用) Console介绍 Console ...

  6. 【译】在 Chrome 开发者工具中调试 node.js

    原文链接 : Debugging Node.js in Chrome DevTools 原文作者 : MATT DESLAURIERS 译文出自 : 掘金翻译计划 译文链接 : https://git ...

  7. 神器——Chrome开发者工具(一)

    这里我假设你用的是Chrome浏览器,如果恰好你做web开发,或者是比较好奇网页中的一些渲染效果并且喜欢折腾,那么你一定知道Chrome的开发者工具了.其实其他浏览器也有类似工具,比如Firefox下 ...

  8. 用Chrome开发者工具做JavaScript性能分析

    来源: http://blog.jobbole.com/31178/ 你的网站正常运转.现在我们来让它运转的更快.网站的性能由页面载入速度和代码执行效率决定.一些服务可以让你的网站载入更快,比如压缩J ...

  9. 在chrome开发者工具中观察函数调用栈、作用域链与闭包

    在chrome开发者工具中观察函数调用栈.作用域链与闭包 在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量 ...

随机推荐

  1. 用java实现word转html

    由于项目需要,要完成将上传的word文件转成html文件的功能.在网上搜了一下,大致有3种方法:1.用jacob实现 2.用poi实现 3.用openoffice实现. 从网上来看好像jacob用的人 ...

  2. APMserv常见问题

    一.启动是提示apache启动失败,mysql启动成功 1.去掉ssl的勾选(勾选需要证书),重启看解决没有 2.端口被占,吧apache端口改成80或者8080端口(其他端口也可以试试,80的话访问 ...

  3. 【SQL】事务

    1.事务的开始结束: START TRANSACTION :标记事务开始 COMMIT :标记事务成功结束 ROLLBACK :标记事务夭折 2.设定事务只读.读写性质: SET TRANSACTIO ...

  4. PHP的普通传值与引用传值以及unset

    首先,要理解变量名存储在内存栈中,它是指向堆中具体内存的地址,通过变量名查找堆中的内存; 普通传值,传值以后,是不同的地址名称,指向不同的内存实体; 引用传值,传引用后,是不同的地址名称,但都指向同一 ...

  5. [BZOJ2064]分裂 状压dp

    2064: 分裂 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 656  Solved: 404[Submit][Status][Discuss] De ...

  6. codeforces 739E

    官方题解是一个n2logn的dp做法 不过有一个简单易想的费用流做法 对每个小精灵,连边(A,i,1,pi) (B,i,1,ui) (i,t,1,0) (i,t,1,-pi*ui) 最后连边(s,A, ...

  7. 使用base64对图片的二进制进行编码,使其可以利用ajax进行显示

    有时候我们需要动态的将图片的二进制在页面上进行显示,如我们需要弄一个验证码的功能,那么如果我们的验证码的图片在后台得到的是该图片的二进制,那么当我们需要在页面上点击一个按钮利用ajax进行切换的时候, ...

  8. CodeForces 669C

    链接:http://codeforces.com/problemset/problem/669/C http://www.cnblogs.com/Ash-ly/p/5443155.html 题意: 给 ...

  9. Linux命令之kill

    kill [-s signal | -p] [ --] pid… kill –l [signal] 终止指定进程.命令kill将指定的信号发送到指定的进程或进程组.如果没有指定信号,则发送SIGTER ...

  10. 24、Django实战第24天:讲师列表页

    1.复制teracher-list.html到templates目录下 2.编辑teacher-list.html,继承base模板 3.编辑organization.views.py ... fro ...