Open mileOfSunshine opened 5 years ago
说到chrome devtools 使用技巧,今天想和大家分享两个,网页截屏和快速引入并引用npm库。除此之外,还有一个大惊喜~
如何实现网页截屏,大家可能会想使用微信的截图工具就可以呀!是的,笔者往常也是这样截图的。那如何截取长页面的内容呢? 我想微信截图恐怕就无法实现了,这时候你可能会借用‘外力’,没错,我们可以使用软件FastStone Capture。那有没有不借助‘外力’也能截图长图呢,答案是肯定的。
那如何利用devtools实现截图呢?
1、F12
打开开发者工具;
2、利用快捷键 ctrl + shift + p
调出命令行;
3、输入screen,选择 capture full size screenshot
(捕捉全尺寸屏幕截图)
锵锵~~ 生成当前页面的长图。是不是很惊喜,执行一个命令就完成了。
温馨提示:
capture full size screenshot
捕捉整个网页屏幕截图
capture node screenshot
捕捉节点网页屏幕截图
capture screenshot
捕捉当前屏幕截图
有时候我们想学习一个库( 很有兴致的那种 ),可能往往就在环境搭建的过程中放弃了学习( 苦笑 )。今天介绍的这个想必能解决你的痛点!
1、获取并添加Chrome扩展程序:Console Importer
2、如果你想练习下 lodash
里的方法,你可以执行 $i('lodash')
将 lodash
库引入,接下来就可以愉快把玩工具库啦。对于学习使用某个工具库真的很方便,有木有~
Q1: $i
不像预期的那样起作用
一些网站可能已经把 $i
作为一个全局变量,这个扩展程序就无法重写覆盖它,这时你可以 console.$i
这样调用,也是一样的效果。
Q2: $i
无法导入资源
出错的原因是这些网站采用了严格的内容安全政策(Content Security Policy
)。你可以打开一个本地html,或者是用一个没有进行严格内容安全政策的网站进行 $i('lodash')
练习
想必大家在网上也看到过很多介绍console方法的文章,笔者觉得有些碎片化了。故借此机会,向大家推荐阅读devtools的开发者手册(感觉是宝藏, 虽然有一定的学习门槛)
使用 Console API 可以向控制台写入信息、创建 JavaScript 配置文件,以及启动调试会话。
assert, clear, debug, dir, dirxml, error, group, groupCollapsed, groupEnd, info, log, profile, profileEnd, time, timeEnd, timeStamp, trace, warn
的使用,也提供了相关实例。Command Line API 包含一个用于执行以下常见任务的便捷函数集合:选择和检查 DOM 元素,以可读格式显示数据,停止和启动分析器,以及监控 DOM 事件。
$_, $0 - $4, $, $$, $x, clear, copy, debug, dir, dirxml, inspect, getEventListeners, keys, monitor, monitorEvents, profile and profileEnd, table, undebug, unmonitor, unmonitorEvents, values
我猜有人犯懒了,链接都懒得打开啦...
那我就把 devtools
手册目录贴出来啦,说不好一看又感兴趣了呢~
单词我们都认识,能不能学好就靠你自己啦~~~前面推荐的Console API Reference
和Command Line Reference
已经是中文文档了哈,莫慌莫慌~
1、
$0
关联当前选中的html节点,$1
关联上次选中的节点,一直到$4
2、在未定义$
变量时,例如未引入jQuery
,$
在console
中是函数document.querySelector
的一个别名。 3、$$
不仅执行了document.querySelectorAll
而且返回一个节点数组,不是Node List
4、$_
关联上次执行的结果 5、$i
利用Chrome扩展程序:Console Importer 可以快速引入和应用npm库 6、可以操作全局方法copy
在console
中拷贝任何资源 7、如果你想对在console
里输出的数据做额外处理,可右击,‘Store as global variable’ ,会通过temp(num)
变量就行保存,eg:temp1, temp2...
8、Copy HTML
, 除了右击Copy ...
,你也可以应用万能的Ctrl + c
9、console.assert, console.table, console.dir 10、通过h
来隐藏显示面板中选中的元素