Chrome 开发者工具中的命令菜单
单

大家对命令菜单(Command Menu)应该都不陌生。目前主流的编辑器中都内置了对该功能的支持。在 Sublime Text 和 Visual Studio Code 中你都可以通过快捷键 Ctrl + Shift + P 呼出命令菜单(在 Mac 上是 Cmd + Shift + P)。
在呼出的菜单中输入关键字选择自己需要的命令(支持模糊搜索哦),按回车即可执行命令。极大的提高了效率。
举个例子,以下的操作是为文件设置 JavaScript 的语法高亮:

很方便吧。
如果你已经习惯了这种操作方式,那么今天要告诉你一个好消息。Chrome 开发者工具现在也支持命令菜单了!激活的方式还是 Ctrl + Shift + P。
激活后,长这个样子:

熟悉的配方,熟悉的味道。有木有!
滚动菜单,查看支持的命令,基本涵盖了我们日常开发用到的所有功能。
举几个实用的小例子吧(这些例子不同命令菜单一样可以实现,但命令菜单可以极大的提高效率)。
1. 搜索所有资源文件
激活命令菜单,输入 search,选择 Search all files,回车。在弹出的输入框中输入关键字就可以在所有页面引入的资源文件中搜索该关键字了。还支持正则表达式哦。

2. 禁用/开启页面 JavaScript
激活命令菜单,输入 js,选择 Disable JavaScript。再次选择,即可开启。

3. 隐藏 HTML 中的注释
激活命令菜单,输入 comment,选择 Hide HTML Comments。

更多快捷功能,自己去发现吧!
Chrome 开发者工具中的命令菜单的更多相关文章
- 【译】在 Chrome 开发者工具中调试 node.js
原文链接 : Debugging Node.js in Chrome DevTools 原文作者 : MATT DESLAURIERS 译文出自 : 掘金翻译计划 译文链接 : https://git ...
- 使用chrome开发者工具中的network面板测量网站网络性能
前面的话 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代.调试和分析.使用 Network 面板测量网站网络性能.本文将详细介绍chrom ...
- 在 Chrome 开发者工具中调试 node.js
命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node ...
- 在chrome开发者工具中观察函数调用栈、作用域链与闭包
在chrome开发者工具中观察函数调用栈.作用域链与闭包 在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量 ...
- 在chrome开发者工具中观察函数调用栈、作用域链、闭包
在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量对象,闭包,this等关键信息的变化.因此,断点调试对于快 ...
- 前端基础进阶(六):在chrome开发者工具中观察函数调用栈、作用域链与闭包
在前端开发中,有一个非常重要的技能,叫做断点调试. 在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量对象, ...
- Chrome开发者工具中Elements(元素)断点的用途
SAP Engagement Center UI的这个按钮会每秒钟刷新一次,显示页面已经打开了多长时间. 需求:需要找到哪行JavaScript代码不断刷新的按钮文字. 按照经验判断,这个文字肯定是一 ...
- 使用chrome开发者工具中的performance面板解决性能瓶颈
前面的话 使用Chrome DevTools的performance面板可以记录和分析页面在运行时的所有活动.本文将详细介绍如何使用performance面板解决性能瓶颈 准备 [匿名模式] 匿名模式 ...
- Chrome开发者工具 debug 调试
Chrome 的开发者工具分为 8 个大模块,每个模块及其主要功能为: Element 标签页: 用于查看和编辑当前页面中的 HTML 和 CSS 元素. Network 标签页:用于查看 HTTP ...
随机推荐
- House Robber I & II & III
House Robber You are a professional robber planning to rob houses along a street. Each house has a c ...
- 基于ZedBoard的Webcam设计(一):USB摄像头(V4L2接口)的图片采集【转】
转自:http://www.cnblogs.com/surpassal/archive/2012/12/19/zed_webcam_lab1.html 一直想把USB摄像头接到Zedboard上,搭建 ...
- 2012 Dhaka
2012 Dhaka B - Wedding of Sultan 题目描述:给出一棵树的\(dfs\)序(只要经过就会记录),求每个点的度 solution 按\(dfs\)序的规则还原这棵树就好了. ...
- spring boot JPA中实体类常用注解
spring boot jpa中的注解很多,参数也比较多.没必要全部记住,但是经常查看官方文档也比较麻烦,记录一下一些常用的注解.通过一些具体的例子来帮助记忆. @Entity @Table(name ...
- DOM事件阶段以及事件捕获与事件冒泡先后执行顺序
平时浏览这么多技术文章,如过不去实践.深入弄透它,这个技术点很快就会在脑海里模糊.要加深印象,就得好好过一遍.重要的事情说三遍,重要的知识写一遍. 开发过程中我们都希望使用别人成熟的框架,因为站在巨人 ...
- Database Course Summary 001
0x01. 基本概念 SQL:Structured English Query Language 1. 数据 Data 数据(Data):描述事物的符号记录:数据内容是事物特性的反应或描述:数据是符号 ...
- LeetCode(18):四数之和
Medium! 题目描述: 给定一个包含 n 个整数的数组 nums 和一个目标值 target,判断 nums 中是否存在四个元素 a,b,c 和 d ,使得 a + b + c + d 的值与 t ...
- 欢迎来到abc2237512422的博客
这是第一篇博文. 本博客已迁移到 abc233.site
- element-ui的rules中正则表达式
<template> <el-form :model="unuseForm" label-position="top" :rules=&quo ...
- UEditor插入视频,Object Iframe等标签被过滤问题处理
UEditor插入视频由于兼容性问题,需要再处理一个视频代码,但是新版ueditor不支持Objec IFrame标签,所以要加入// xss过滤白名单 名单来源: https://raw.githu ...