快捷指令速查表

标题
快速打开Dev Tools Ctrl + Shift + i
打开命令菜单 Ctrl + Shift + P
快速打开Dev Tools Ctrl + Shift + i
快速打开Dev Tools Ctrl + Shift + i
快速打开Dev Tools Ctrl + Shift + i
快速打开Dev Tools Ctrl + Shift + i
快速打开Dev Tools Ctrl + Shift + i
快速打开Dev Tools Ctrl + Shift + i
快速打开Dev Tools Ctrl + Shift + i

修改Dev Tools的主题

  • 修改为dark主题

dark theme

  • 修改为白色主题
    light theme

截屏

screenshot

改变调试窗口的位置

  1. dock to right
  2. dock to left
  3. dock to bottom

常用Tab介绍

1. Element

  • 查看页面在移动端布局的样子，可以点击下面的按钮

  • 给目标元素添加样式

首先选中元素，然后在下面添加样式

  • 让hover永驻

选中目标元素然后点击下面的内容

  • 只修改列表项中的某一个

选中目标元素点击cls

  • 复制样式并粘贴样式

选中目标样式，然后点击copy styles

选中需要粘贴样式的位置，然后粘贴到下面的位置

Computed

这个tab栏主要记载了当前页面都应用了哪些样式，通过点击可以跳转到这些样式。

  • Show all与Group

Layout

在Layout标签下可以调试Grid布局和Flex布局。

勾选flex元素可以给flex元素加上横线边框。

可以通过styles面板中的点击图标来测试flex的其他属性。

Event Listeners

该面板可以查看当前页面所有的监听事件。

图解前端调试工具Chrome Dev Tools的使用相关推荐

  1. 前端性能优化必备技能 - 利用 Chrome Dev Tools 进行页面性能分析

    背景 我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据 ...

  2. 前端性能分析 Chrome Dev Tools 之 Performance

    前端性能分析 Chrome Dev Tools 之 Performance 文章目录 前端性能分析 Chrome Dev Tools 之 Performance 1. 属性字段 2. 常用性能数据指标 ...

  3. 前端性能优化之利用 Chrome Dev Tools 进行页面性能分析

    背景 我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据 ...

  4. Debug a Server–Side Rendered SAP Spartacus Storefront Using Chrome Dev Tools

    In SAP Spartacus document there is a page for "How to Debug a Server–Side Rendered Storefront&q ...

  5. 谷歌 Chrome Dev Tools 浅析 – 成为更高效的 Developer

    2019独角兽企业重金招聘Python工程师标准>>> Google Chrome在招来了FireFox,FireBug的项目组领导人John J. Barton后,Chrome D ...

  6. 使用Chrome Dev Tools, deb.js调试Javascript小技巧

    本文讲介绍一些基于 Chrome Dev Tools 的实用的客户端Javascript 调试小技巧.我将重点关注那些无从下手,不知道该在哪儿添加断点的情景. 首先看下本文主题: 找出哪段代码正在修改 ...

  7. 从dreamweaver转入Chrome Dev Tools 开发html css静态页面

    2021年啦,你还在用dreamweaver或者文本编辑器开发网页? You are out! 学习用Chrome Dev Tools 怎么开发,记录一下. 用webstorm打开你开发的html页面 ...

  8. 浏览器调试工具精讲 Chrome Dev Tools精讲，前端必看！

    参考视频 文章目录 各个面板的功能介绍 常用Tab中的Element 常用Tab中的Console 常用Tab中的Source 常用Tab中的Network 常用Tab中的Application CS ...

  9. 使用 Chrome Dev tools 分析应用的内存泄漏问题

    Catching memory leaks with Chrome DevTools 当分配的内存没有返回给操作系统或内存池时,我们将其称为内存泄漏. 在这种情况下,内存未被任何应用程序使用,并且被不 ...

最新文章

  1. 一起来用Websocket（一）开篇 Websocket！Socket在HTML5复活
  2. keil c语言 位域,联合体位域在keil c遇到的问题怎样解决？
  3. ［重磅，建议收藏］JAVA集合框架中的常用集合及其特点、适用场景、实现原理简介...
  4. 蚂蚁金服 Java RPC 开源框架—SOFARPC
  5. LINUX运维之道_摘要
  6. 【青梅快讯】迅速迭代，Greenplum6为你带来持续惊喜
  7. 如何在IBM SPSS Statistics中进行K均值聚类分析
  8. Hdu 5064 Find Sequence 解题报告
  9. HBuilder制作表格式的简历
  10. java 集成 pageoffice 实现 word 文档的在线编辑以及流转
  11. pyecharts绘图
  12. 如何将eml格式转换成word文档
  13. 苹果个人开发者账号申请+获取证书+上架应用商城
  14. selenium+python设置爬虫代理IP
  15. Bootstrap下拉菜单（Dropdown）插件实现隐藏操作按钮的简单实现
  16. 数码相机删除照片怎么恢复？
  17. 大数据学习，Scala快速学习的方法
  18. leetcode【排序】这个自定义排序的比较器感觉不好直接想出来，需要多练欸
  19. 我用Fedora19 办公
  20. mkv格式怎么解封？教你用格式转换的方法把mkv格式转换成avi

热门文章

  1. 根据冯诺依曼原理 计算机分为哪五大部件,冯诺依曼计算机的五大部件(什么是冯诺依曼计算机结构)...
  2. 使用原生 Canvas 播放视频
  3. C++ SIGSEGV报错
  4. P1506 拯救oibh总部 （模拟搜索广度优先搜索,BFS深度优先搜索,DFS）
  5. KSO - The source IQueryable doesn‘t implement IDbAsyncEnumerable＜Admin.NET.Core.WareLocationVsContai
  6. 第二代天神：克罗诺斯
  7. 人工智能语音助手：如何实现智能助手的实时语音监控功能？
  8. MMDet——用单卡train.py debug分布式代码
  9. gitlab 取消掉邮箱验证功能
  10. matlab rgb 到 ycgcr,基于混合肤色模型的快速人脸检测算法