Chrome DevTools的使用

一、Chrome DevTools 简介

  • Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析
  • 手册：Chrome 开发者工具中文手册、Chrome 开发者工具官网
  • 打开Chrome开发者工具
    • 在Chrome菜单中选择：更多工具->开发者工具
    • 在页面元素右键点击，选择检查
    • 快捷键：Ctrl+shift+I（最近关闭）或Ctrl+shift+C（Elements）或 Ctrl+shift + J（console） 或 F12

二、Chrome DevTools 基本功能

1、Elements元素面板：检查和调整页面，调试Dom，调试CSS

  • 查看和选择DOM节点
  • 实时编辑HTML和DOM
    • 添加或者修改HTML属性：鼠标右键---Add attribute 、Edit attribute
    • 添加HTML标签：右键---Edit as HTML
    • 复制或者剪HTML标签：右键---Copy或者直接Ctrl + C/X 、Ctrl + V
    • 拖动HTML标签：按住鼠标左键拖到位置松开即可
  • 在Console中访问节点
  • 在Dom中断点调试

2、Network网络面板：调试请求，链接页面静态资源分布，网页性能检测

3、Console控制面板：调试JavaScript、查看日志、交互式代码调试

4、Sources 源代码资源面板：调试JavaScript页面源代码，进行断点调试代码

5、Application应用面板：查看&&调试客户端存储

6、Performacne性能面板：查看页面性能细节，细粒度对网页载入进行性能优化

7、Memory内存面板：JavaScript CPU分析器，内存堆分析器

8、Security安全面板：查看页面安全及证书问题

9、Audits面板：使用Google Lighthouse辅助性能分析。给出优化建议

原文地址：https://www.cnblogs.com/EricZLin/p/11839331.html

时间： 2024-11-06 03:52:11

Chrome DevTools的使用的相关文章

使用Chrome DevTools的Timeline分析页面性能

随着webpage可以承载的表现形式更加多样化,通过webpage来实现更多交互功能,构建web应用程序已经成为很多产品的首要选择.这种方式拥有非常明显的优势:跨平台.开发便捷.便于部署和维护等等,但随着功能的不断积累,web应用程序也会变得越来越复杂.但是,我们仍然想要在webpage支持丰富的呈现形式的同时,让页面效果能够达到>=60fps(帧)/s的刷新频率以避免出现卡顿,就需要我们使用一些比较直观的方式来分析衡量页面的性能问题,为性能优化方案提供依据. 为什么是60fps?我们的目标是保

Chrome DevTools的15个使用技巧(译)

谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器.伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须掌握的工具.大多数前端开发者可能熟悉关于chorme的许多特点,例如使用console和debugger在线编辑CSS.在这篇文章中,我们将分享15个很酷的技巧,让你能够更好的改进工作流程.看完这些技巧你会惊奇而又兴奋的发现是不是很像Sublime Text. 1.快速文件转换 如果Sublime Text没有“Go to anything”这个功能你不可能

chrome devtools

Elements chrome devtools 中 Elements panel 是审查 dom 元素和 css 的, 可以实时修改 dom/css. windows: ctrl + shift + i mac: cmd + opt + i DOM 修改 html & 属性 节点右键, 如下图, 可以: 添加属性(enter) 修改 html(F2) 删除元素(delete) 除了右键, 还可以: h toggle 元素的 visibility 属性 拖拽节点, 调整顺序 拖拽节点到编辑器 c

webapp网页调试工具Chrome Devtools

前言 css3说太多了,会显得文章显得千篇一律:介绍,介绍~demo,完结,然后就没有然后了.所以时不时插一篇扯蛋的玩意,起码还可以调节一下胃口,咸的辣的哪个喜欢就拿克(去). 之前想要测试手机demo的时候都要先把电脑屏幕拉窄,然后用自适应的办法来捣腾,但是我们都这样做其实并不是符合手机屏幕标准的.现在的智能手机都是以每英寸包含有多少像素点来衡量屏幕清晰度,而不是像PC端的屏幕清晰度都是以像素点来作为基准,因此假如老是按照拉窄屏幕来试图获取手机上显示效果显然不全对. 当然,作为一个非智能设备研

[Debug] Chrome Devtools: Elements - Console Integration

The Element Inspector in Chrome DevTools offers powerful integration with the console - learn how to programmatically navigate your selected element, how to search through the history and use CSS selectors to control what you're looking at and how to

Chrome Devtools简介

Chrome开发工具(又称DevTools),是一套内嵌在chrome浏览器内部的web编写和调试工具.DevTools提供给web开发人员深入地访问浏览器内部和web应用的机会.DevTools可以有效地 跟踪布局问题 , 设置JavaScript断点 ,以及 进行javascript代码的优化 . 打开DevTools 要在一个网页或者web application中打开DevTools,可以用下面两种方法: 选择Chrome浏览器窗口右上角的 菜单 ,然后选择 工具 > 开发工具. 右键单

chrome DevTools Theme-Zero Dark Matrix体验

昨晚在tuiku上看文章:忽然发现了一个很吊的chrome DevTools Theme: Zero Dark Matrix  早上上班折腾了十几分钟搞定.分享给大家 本人一直喜欢喜欢用chrome浏览器进行开发和调试:但是F12之后界面一片白色不够酷:现在安装了这个插件所以瞬间心情大好. 1.下载:Zero Dark Matrix(由于翻不了墙,只能百度自己找:我也会在本篇文章附件中提交该插件的安装包) 2.chrome地址栏输入: chrome://extensions/:然后鼠标拖动"插件

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能

来源: http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles 我们都希望创建高性能的Web应用程序.由于我们的应用程序变得越来越复杂,我们可能想要支持丰富的画面以及理想的60帧/秒,这能保证我们的应用程序响应灵敏且生动流畅. 知道如何衡量和提高性能,是一个有用的技能,在这短短的文章中,我会带您简单回顾关于如何通过 Chrome DevTools的 Timeline和Profiles做到这一

【转】chrome devtools protocol——Web 性能自动化

前言 在测试Web页面加载时间时,可能会是这样的: 打开chrome浏览器. 按F12打开开发者工具. 在浏览器上打开要测试的页面 查看开发者工具中Network面板的页面性能数据并记录 或者在开发者工具中Console面板运行performance.timing和performance.getEntries()收集数据 performance相关信息看这里PerformanceTiming 几十上百个页面,每个版本都这样来,估计疯了,所以就想怎么把它做成自动化呢? chrome devtool