Chrome Devtools

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 面板中的样式变更会自动保存到文件中。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS中Buffer数据详解

    随着WebSocket、WebAudio、Ajax2等广泛应用,前端方面只要是处理大数据或者想提高数据处理性能,那一定是少不了 ArrayBuffer对象

    jinghong
  • WebAudio API

    jinghong
  • Node

    想要实现其他复杂的操作和效果,都要依靠 宿主环境 提供API,目前,已经嵌入 JavaScript 的宿主环境有多种,最常见的环境就是 浏览器 和 操作系统 ;

    jinghong
  • 【答疑释惑第十一讲】开发应用主要用什么语言?

    疑惑一 开发应用主要用什么语言? 其实这个问题很多工作的,看到都觉得这个问的有点没有头绪,但是对于初学者来说还是希望更多的了解点这方面的,所谓应用开发就是处于底...

    程序员互动联盟
  • 区块链社交im及时通讯系统开发

    一提及社交平台,我们应该最先想到的是现在腾讯的微信,这种社交系统已经占领市场的半壁江山。社交平台多以app的形式出现,当然pc端也有,但随着手机端的用户增多,A...

    v13823115027
  • 短视频APP源码凭借独特的优势稳步发展

    短视频因为其一分钟左右的视频内容而更适合现如今快节奏的生活。其低门槛,易上手的方式给了更多用户曝光的机会,而网红经济的爆红更是让人们对短视频APP源码趋之如骛。...

    布谷安妮
  • VR视频识别率测试方案

    VR眼镜层出不穷,VR 应用如雨后春笋,它们消费的内容主要有图片,视频和游戏3种。那么如何判断一个视频是否是 VR 视频呢?

    腾讯移动品质中心TMQ
  • 短视频app开发怎么实现变现——创业开发者最关心的问题

    在短视频领域中抖音已经杀出各个包围圈,与微博和微信分别割据流量市场。与其说是抖音吸引了大批用户,倒不如说是短视频应用牢牢抓住了流量市场。吸引来的流量最终都会转化...

    直播2144899870
  • TypeScript: Week Reflection

    绿巨人
  • 西瓜视频的左右开攻

    Tiktok让字节跳动再次站上风口浪尖,也让外界再度认真审视这家诞生不过8年,却已经估值千亿美金,并且仍在全速狂奔的企业。

    刘旷

扫码关注云+社区

领取腾讯云代金券