chrome web开发工具

顾名思义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 DevTools
  • Dev Tips

来自：W3CPlus.

链接：http://www.w3cplus.com/tools/how-to-use-chrome-devtools-like-a-pro.html（点击尾部阅读原文前往）

英文出处：https://medium.com/jotform-form-builder/how-to-use-chrome-devtools-like-a-pro-b9bd414870e3

译者：昵称“大漠”，W3CPlus,Sass中国创始人，目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

 

时间： 2024-12-18 07:18:57

chrome web开发工具的相关文章

100+ 超全的web开发工具和资源

转载出处:https://xituqu.com/170.html 作为Web开发者,这是好的时代,也是坏的时代.Web开发技术也在不断变化.虽然很令人兴奋,但是这也意味着Web开发人员需要要积极主动的学习新技术和新的编程语言,并愿意和渴望接受新的挑战,以适应变化.新的挑战可能会包括一些开发上的要求,如利用适应现有的框架来满足业务需求.测试一个网站,能从中知道出了哪些技术上的问题,并且我们针对这些问题进行优化和消除.便于后端的开发进程加快和测试.所以我们列出了完整的web开发所需要的工具和资源,助

超全的web开发工具和资源

作为Web开发者,这是好的时代,也是坏的时代.Web开发技术也在不断变化.虽然很令人兴奋,但是这也意味着Web开发人员需要要积极主动的学习新技术和新的编程语言,并愿意和渴望接受新的挑战,以适应变化.新的挑战可能会包括一些开发上的要求,如利用适应现有的框架来满足业务需求.测试一个网站,能从中知道出了哪些技术上的问题,并且我们针对这些问题进行优化和消除.便于后端的开发进程加快和测试.所以我们列出了完整的web开发所需要的工具和资源,助力开发者提高开发效率!学不止步,让我们努力成为一个优秀的开发者!

十大移动web开发工具

以下列出的这些是目前十大移动web开发工具,移动开发者可以(根据具体情况)用这些工具来创建apps,实现丰富的功能.欢迎提出宝贵意见. 1)mobl-lang Mobl是一款免费且开源的语言,可以加快移动app的开发速度.结合HTML5技术,mobl具有以下特性:是一种简洁的语言,给人的感觉就如同native语言,开发速度快;大型IDE(Eclipse)的支持,可以实现纠错.自动完成代码.自动检索引用等功能; 快速保存.随时测试.每当保存代码时mobl IDE 就会自编译,随时可以在移动浏览器中

6个好用的Web开发工具

在过去的几年间,涌现出了很多Web开发工具,它们大多还是比较吸引人的,方便了我们的工作.我们可以学习一下这些新东西,短时间就可以拓宽思路(PHP100推荐:学习10分钟,改变你的程序员生涯).这些应用允许我们我们实时编辑和预览客户端代码:HTML,CSS以及JavaScript.更重要的是,他们基本上都是开源的,你可以免费的使用它们用来教学或调试程序. 个人而言,这些好用的开发工具极大地帮助了我的工作,当我被JavaScript或CSS的代码卡住的时候,我就可以在环境上分享我的代码,请其他开发者

Web 开发工具控件ASPxperience Suite

ASPxperience Suite 是我们下一代的 Web 开发工具控件,可以为客户带来更多优秀体验,包括导航.数据布局管理以及嵌在 Web 应用程序中的浮动控件的应用.它从底层编写,然后使用支持 ASP.NET 2.0 Framework ,并且完全支持 out-of-the-box AJAX .此产品包含在产品集合 DXperience Universal Subscription 中. 具体功能: 包含在 ASPxperience Suite 中的控件只产生少量的 HTML 代码 可以根

JAVA-JAVA WEB开发工具下载

JAVA WEB开发工具下载 1.JDK下载程序名:jdk-8u141-windows-x64.exe下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

web开发工具-Firebug

Firebug 是一个开源的web开发工具. 安装 Firebug Firebug下载地址: https://addons.mozilla.org/en-US/firefox/addon/1843/ 使用Firefox浏览器访问以上下载地址,打开页面后,点击下载按钮后,会有个弹窗页面,提示安装的目录,安装后重启你的Firefox浏览器. 重启后就可以在Firefox浏览器中看到Firebug的图标.点击Firebug图标(位于Firefox浏览器右上角)即可激活Firebug插件. Firebu

支持 out-of-the-box AJAX 的 Web 开发工具控件ASPxperience Suite

ASPxperience Suite 是我们下一代的 Web 开发工具控件,可以为客户带来更多优秀体验,包括导航.数据布局管理以及嵌在 Web 应用程序中的浮动控件的应用.它从底层编写,然后使用支持 ASP.NET 2.0 Framework ,并且完全支持 out-of-the-box AJAX .此产品包含在产品集合 DXperience™ Universal Subscription 中. 具体功能: 包含在 ASPxperience Suite 中的控件只产生少量的 HTML 代码 可以

深受程序员喜爱的4款Web开发工具，可极大的提高生产力

对于开发人员而言,时间始终是稀缺资源. 从严格的最后期限到多个项目——到出乎意料的需求——我们的时间总是有需求的.因此,我们一直在寻找有助于提高生产率的工具和流程. 接下来小编就将介绍4种Web开发工具,希望它们能够给身为程序员的你带来一定的额外生产力. 一起看看吧 一.通过Oh My Zsh掌握命令行 Windows和OS X的默认命令行界面(命令Prompt和Bash)可能令人生畏且难以自定义.如果你不是这方面的专家,你可能会重复那些可以自动完成的琐碎工作. Oh My Zsh是一个基于Zs