前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Chrome Devtools

Chrome Devtools

作者头像
jinghong
发布2020-05-09 15:21:29
1.1K0
发布2020-05-09 15:21:29
举报
文章被收录于专栏:前端开发0202

Chrome Devtools 使用技巧

1.网页可编辑

(1)document.designMode = ‘on’ (2)打开任何网站,在网址栏输入:可手机端 javascdy.setAttribute(‘contentEditable’,’true’);

2.chrome 网页全屏、元素截图

(1)移动端 点击右上角三个点 里面的full即可全屏截图 (2)pc端 打开devtools ctrl+shift+p 打开命令行 输入full即可 (3) 截图单个元素 选择一个元素,MAC下按cmd+shift+p、windows下按ctrl+shift+p来打开命令菜单,然后输入Capture node screenshot

3.条件断点

(1)在断点的地方右键,选择“Edit breakpoint”就可以写上你想出现调试的条件表达式 (2)在sources面板 现在要断点的代码 ctrl+shift+e 在控制台运行当前选中的代码片段

4.将修改后的CSS保存到文件

(1)点击你编辑的CSS文件的名称,进入到Sources面板,你会发现你的修改已经在里面了。然后你可以对你实时的编辑进行保存。 这个修改不适用于添加的新选择器,也不适用于element.style属性,仅仅适用于原有选择器。

5.轻松获取某个审查元素的引用

(1)打开控制台,在 Elements 界面下,对着某个 dom 标签点击右键,选择 Store as global variable。

6.创建并钉住一个动态表达式

7.禁用缓存和保存日志

(1)缓存有时候会造成很多难以排查的 bug,为了排除这个因素,你可以勾选Network 界面下的 Disable cache 选项(它只在 DevTools 窗口打开时生效)。

8.Chrome Workspace

(1) 在sources面板中, 通过 Workspace,你可以把本地服务器的资源映射为硬盘上的文件,实现调试 JS 和 CSS 的同时自动保存文件,比如 Elements 面板中的样式变更会自动保存到文件中。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-09-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Chrome Devtools 使用技巧
    • 1.网页可编辑
      • 2.chrome 网页全屏、元素截图
        • 3.条件断点
          • 4.将修改后的CSS保存到文件
            • 5.轻松获取某个审查元素的引用
              • 6.创建并钉住一个动态表达式
                • 7.禁用缓存和保存日志
                  • 8.Chrome Workspace
                  领券
                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档