mileOfSunshine
commented
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 捕捉当前屏幕截图
快速引入并应用npm库
有时候我们想学习一个库( 很有兴致的那种 )，可能往往就在环境搭建的过程中放弃了学习( 苦笑 )。今天介绍的这个想必能解决你的痛点！
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 配置文件，以及启动调试会话。
- Console API Reference介绍了
assert, clear, debug, dir, dirxml, error, group, groupCollapsed, groupEnd, info, log, profile, profileEnd, time, timeEnd, timeStamp, trace, warn的使用，也提供了相关实例。
Command Line API 包含一个用于执行以下常见任务的便捷函数集合：选择和检查 DOM 元素，以可读格式显示数据，停止和启动分析器，以及监控 DOM 事件。
- Command Line Reference一共介绍了21个方法:
$_, $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关联上次选中的节点，一直到$42、在未定义$变量时，例如未引入jQuery，$在console中是函数document.querySelector的一个别名。 3、$$不仅执行了document.querySelectorAll而且返回一个节点数组，不是Node List4、$_关联上次执行的结果 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 + c9、console.assert, console.table, console.dir 10、通过h来隐藏显示面板中选中的元素