chrome devtools使用技巧

我心飞翔 分类:javascript

Chrome devtools使用技巧

一、chrome devtools基础使用

查看版本:地址栏输入 chrome://help

彩蛋:地址栏输入 chrome://deno

1.数据操作

1.copy: 在chrome devtools中,可以通过全局的方法copy()复制任何能拿到的资源

2.store as global(存储为全局变量):使用这些变量来操作对应的数据,就不用担心会影响到原来的值了。操作方式:鼠标移至变量 然后右键,选择 store object as global variable

console.log({name: "liz", title: "111"})
//右键 save store
 

3.保存报错信息:代码报错了,如何和同事发送报错问题呢? 我们可以直接把堆栈追踪信息保存为一个文件,而不只是发个截图给对方。操作方式:在报错的信息旁边,然后右键save as...

2.快捷键通用技巧(mac是command windows是ctrl)

1.切换DevTools窗口的展示布局 ctrl+shift+D

一般我在使用devtools时,窗口习惯在右边,但有的时候,想把窗口调到最下面

2.快速切换DevTools面板 向左向右 ctrl+[ ctrl+]

这样可以节省鼠标点击时间

3.find聚焦查找 ctrl+f

elements console source network都是支持的,这也是软件通用的查找快捷键

4.查找js源文件

ctrl+p

5.所有快捷键

setting里可以找到

3.command menu强大功能 ctrl+shift+p

1.dom截屏 网页截屏

当你只想对某一个 DOM 节点截图时,大概率会用工具弄半天,但现在不需要了:

全局截图:Capture full size screenshot

对某一个dom节点截图:右键选中dom,capture node,

2.快速更换主题

Commands 菜单中寻找与 theme 相关的选项,实现 明亮 & 暗黑 两种主题之间的切换

选择theme =>点击reload devtools

3.查看cpu使用情况

command菜单中查找fps相关的选项

4.代码块的使用

如果我想看看,当前浏览器的版本?如果记性不好的话,是不是每次都要去查找这个脚本内容?

console.log(navigator.userAgent)
 

在chrome运行这段代码,会得到结果。

这样的脚本,只是偶尔用用,不想花费时间去查找,怎么存起来方便以后用呢?

  • 进入到 Sources 面板
  • 在导航栏里选中 Snippets 这栏
  • 点击 New snippet(新建一个代码块)
  • 输入你的代码之后保存
  • 右键run运行

可以更方便的使用,重命名一个名字,ctrl+p 之后输入!就可以选择你的脚本了

二、console详解

1.console中的$$$

如果你没有在 App 中定义过 $ 变量 (例如 jQuery )的话,它在 console 中就是对这一大串函数 document.querySelector 的别名。

获取dom: $('div')

获取所有的div列表:$$('div')

获取上次结果的引用:$_

Math.random()
$_
 

在chrome中使用npm包
现在的前端开发过程,离不开各种 npm 插件,但你可能不知道,在chrome devtools里也可以使用npm包

  • 安装 Console Importer 插件
  • 运行 $i('lodash') 几秒钟后,你就可以在chrome里畅玩 loads 了:
$i('lodash')
_range(10) //生成元素0到10的数组
_.cloneDeep() //深拷贝
_.uniq([1,1,3]) //数组去重
 

这里提一个业务相关的事项:

在进行引用类型做拷贝时,一般简单的都是使用序列化和反序列化去进行拷贝,但是会带来问题,问题在于无法处理函数和正则,因此需要别的方案实现。

2.条件断点

在某个循环中,我只想在第10次循环时进行调试,这个时候如果使用单步调试,要点击十次才能到,有没有办法只有第10次循环触发呢?这就用到了条件断点。

  • 右击行号,选择 Add conditional breakpoint...(添加条件断点)
  • 或者右击一个已经设置的断点并且选择 Edit breakpoint(编辑断点)
  • 然后输入一个执行结果为 true 或者 false 的表达式(它的值其实不需要完全为 true 或者 false 尽管那个弹出框的描述是这样说的)。

在这个表达式中,你可以使用任何这段代码可以获取到的值(当前行的作用域)。

条件成立就会暂停代码的执行:

比如在一个for循环中 想只在第10次循环去断点调试 条件设置为 i===10

3.在断点中添加console.log

与其在你的源码的不同地方去添加 console.log / console.table / console.time 等等,不如你直接使用条件判断来将它们“连接”到 Source 面板中。 这样它们就会一直执行,而不当不再需要它们的时候,在 Breakpoints section 点两下鼠标,就可以把所有的断点都移除

这个技术在调试生产环境的问题时同样很有用,因为你通过这样的方式轻松将 console logs 插入到 source 里。

4.比较好用的console

1.console.assert

设想你遇到这样的情况:当某个值判断为假(空字符串,undefined 或者 null)的时候,你期望能在 log 中把它打印出来:

//一般的写法是这样
let v = null
if(!v) {
  console.log("v is null")
}

//其实可以更优雅
let v = null
console.assert(v,"v is null")

//当我们传入的第一个参数为 假 时, console.assert 打印跟在这个参数后面的值。
 

2.增强log的阅读体验

假如有一堆数据要打印在console里面

const name = "liz"
const url = "www.baidu.com"
const id = "fsairmdas"
console.log(name,url,id)
 

光看输出的结果,我们很难判断打印的到底是哪个变量,为了让它变得更加易读,你可以打印一个对象:

console.log({name,url,id})
//原理就是 ES6 中增强的对象字面量 ,所以只要加上 {} 就完事儿了
 

3.console.tab

有的时候一个数组或者是对象有很多内容,console.log去打印非常的难看和费事,这个时候应该使用console.tab

它不仅会根据数组中包含的对象的所有属性,去计算出表中的列名,而且这些列都是可以 缩放 甚至 还可以排序

console.tab(localstorage)
 

我们甚至可以和上面的内容结合

console.table({name,url,id})
 

4.console.dir

有时候你想要打印一个 DOM 节点。 console.log 会将这个交互式的元素渲染成像是从 Elements 中剪切出来的一样。如果说你想要查看 这个节点所关联到的真实的js对象 呢?并且想要查看他的 属性 等等?

在那样的情况下,就可以使用 console.dir :

console.dir($('div'))
 

5.给你的console.log加上css样式

如果你给打印文本加上 %c 那么 console.log 的第二个参数就变成了 CSS 规则,试试看:

console.log('%c hello world', 'background: #222; color: #FFFFFF;font-size:3rem');
 

三. elements的小技巧

元素面板是最常用的UI样式调整面板,这里面常用的操作大家都很了解了,这里讲一下一些技巧

1.通过h来隐藏元素

按一下 'h' 就可以隐藏你在元素面板中选择的元素。再次按下 ' h ' 可以使它出现。某些的时候这很有用:例如你想截图,但你想去掉里面的敏感信息。

2.拖动&放置元素

当你想看看页面的某一部分在 DOM 树的不同位置的显示效果时,只需要拖动放置它(到指定的位置),就像在机器上的其他任何地方一样

3. 伪类样式的调试

有的情况下,我们希望某个元素一直保持hover的状态,但是鼠标又要移动上去才能触发:

这个时候我们可以使用elements面板中的:hov去持续这个状态

四、性能调试&其他工具

1.network模拟网络状态

一般我们在做性能测试的时候,通常要考虑到网速很慢的情况,network面板中可以帮助我们调试这个问题。
操作方式:在network面板中,点击no throttling,我们可以选择 slow 3g,甚至可以自定义带宽。

2.performance的工具使用

Performance是性能分析的主要工具,可以帮助我们调试一个软件的性能。在做性能分析的时候,也要考虑到cpu很差的情况,因此,在这个面板中我们可以模拟较差的cpu。
操作方式:在performance面板中,点击最右边的设置图标,然后在cpu的下拉框中进行选择。

3.lighthouse工具的使用

lighthouse是做页面性能分析测试的,它可以帮我们分析出代码中有哪些需要优化的部分,并打出一个分数,然后我们可以根据给出的建议进行优化,比如清除无用的js\css,图片压缩,某些js文件过大等问题,然后我们可以根据这些问题着手解决,然后优化这个分数。

4.手机连到电脑上调试

虽然我们已经能模拟出网速情况、较差cpu的情况,但生产环境我们必须使用手机进行调试,这个时候我们就使用到了chorme开发工具中的inspect调试

在chrome中输入 chrome://inspect,然后手机连到电脑上调试即可。

5.vue devtools

这个是调试vue vuex状态的chrome 扩展插件,建议大家使用,不光是方便调试vue\vuex中的数据,也可以分析各个组件的性能。

6. adb调试工具

ADB是android sdk里的一个工具, 用这个工具可以直接操作管理android模拟器或者真实的android设备。Android的初衷是用adb这样的一个工具来协助开发人员在开发android应用的过程中更快更好的调试apk,因此adb具有安装卸载apk、拷贝推送文件、查看设备硬件信息、查看应用程序占用资源、在设备执行shell命令等功能。

adb常用命令:

adb devices #查看连接设备

adb install test.apk # 安装应用

adb shell pm list packages #列出手机装的所有app 的包名

adb uninstall cn.com.test.mobile #卸载应用,需要指定包

adb logcat #查看日志

adb logcat -c #清除log 缓存

adb push <local> <remote> #从本地复制文件到设备

adb pull <remote> <local> #从设备复制文件到本地
 

总结

在业务开发过程中,我们往往会忽视对工具的使用,但鉴于目前前端领域快速的发展,其涉及面越来越广,前端开发者们必然不能止步于目前的状态,学好前端调试工具,不仅仅有利于提升开发效率,规范开发,更是一个优秀开发者的体现。

参考资料:

Frontend Wingman
ADB 命令大全

回复

我来回复
  • 暂无回复内容