Chrome Dev tools的几点小技巧
程序员文章站
2022-05-22 22:47:34
呼出快捷指令面板:cmd + shift + p 在Devtools界面下,键入cmd + shift + p`将其激活,然后开始在栏中键入要查找的命令或输入?号以查看所有可用命令 .如下图:其中Open file,Go to line,Go to symbol对于快速打开文件和定位文件位置还是节省 ......
-
呼出快捷指令面板:
cmd + shift + p
在
devtools界面下,键入
cmd + shift + p`将其激活,然后开始在栏中键入要查找的命令或输入?号以查看所有可用命令 .如下图:其中open file,go to line,go to symbol对于快速打开文件和定位文件位置还是节省了不少时间.
1.性能监视器:> performance monitor
-
本地覆盖:
local overrides
感觉这个特性是超级棒。 使用我们自己的本地资源覆盖网页所使用的资源。 多说无益,直接举个例子大家就明白了。大家看到了吧,我们可以把网络资源直接和本地资源映射,再次刷新网页,取得资源文件就是本地的了。这种对js、css等文件批量修改调试特别有用。
local overrides
还可以模拟mock
数据,如果后端api还不ok或者不想频繁的发布后台api。这个功能是相 当有用,不过听说还不支持xhr请求。
-
控制台内置指令
私以为如果网页里面如果没有引用jquery是不是就不能使用$这样的语法了,nonono
$(selector, [startnode])
:单选择器可以选择元素并触发元素事件.
$$(选择器,[startnode])
:全选择器
$x(path, [startnode])
:xpath
选择器
$x(path)
返回与给定xpath
表达式匹配的dom元素数组 .
1.变量打印:%s
、%o
、%d
、和%c
例如: const text = "文本1"
console.log(打印${text}
)
//结果为打印文本1
2.布尔断言打印:console.assert()
做前端调试时很有用。
3.console.table()
内容可以以表格的形式输出.
推荐阅读
-
怎样清洗腊肉才干净?这几点清洗腊肉的小技巧学会它!
-
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
-
Chrome浏览器崩溃掉的小技巧
-
Chrome 35个开发者工具的小技巧
-
Chrome 开发者工具的六个小技巧_html/css_WEB-ITnose
-
Chrome 开发者工具的六个小技巧_html/css_WEB-ITnose
-
怎样清洗腊肉才干净?这几点清洗腊肉的小技巧学会它!
-
Chrome Dev tools的几点小技巧
-
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
-
【转】Chrome Dev Tools 浅析:成为更高效的开发人员_html/css_WEB-ITnose