关键词：
天给大家分享一些使用“Chrome开发者工具”的小技巧。包括调试，优化页面渲染速度等。希望能提升Web开发人员的工作效率。
1，打开Shadow DOM显示
浏览器对例如Video、Password等组件进行了封装，无法查看到组件的详细代码，不利于调试。幸好，通过配置能够在元素标签器中显示被隐藏的组件代码。
实现：Settings → General → Elements → Show user agent shadow DOM
2，在控制台快速选择元素
在Chrome Dev Tools 控制台中还可以通过$变量来选择DOM元素：
- $：Chrome控制台中原生支持类jQuery的选择器。用$加上熟悉的css选择器就能选择DOM节点。
- $0 ~ $4：最近选择过的5个DOM节点。$0会返回最近一次点选的DOM结点。以此类推，$1返回的是上上次点选的DOM节点。最多可以保存5个，如果不满5个，则返回undefined。
3，多行插入符编辑内容
在Sources编辑框中，按住Ctrl（Cmd for Mac），在要编辑的地方点击鼠标，可以设置多个插入符。按下Ctrl + U 撤销编辑，快速输入，快速删除。
4，使用”3步快照”技术来找出JavaScript内存泄露
- 打开开发者工具并且切换到Profiles面板里；
- 在页面执行一个能引起内存泄露的操作；
- 点击“Take Snapshot”来执行一个堆快照；
- 重复执行步骤 2 和步骤 3 三次；
- 选择最后一个堆快照；
- 将过滤器从“所有对象”改为“快照 1 和 2 之间的对象”；
现在应该已经可以看到一组新的泄露对象的集合，选择其中的一个然后查看是什么导致的内存泄露。
5，强制改变元素状态
实现：
- Elements面板右侧Styles标签 → Toggle Element State
- Elements面板左侧右击 → Force element state
6，快速查找文件&搜索特定字符串
实现：Sources面板下 Ctrl+P（Cmd+P for mac）
开发者工具支持在源代码中搜索特定的字符串的功能，这种搜索方式不但能区分大小写，还支持正则表达式。
实现：Sources面板下 Ctrl + Shift + F（Cmd + Shift + F for mac）
7，多列内容选择&匹配相同选项
实现：
- 多列内容选择：按住Alt键，当鼠标箭头变为“+”号后，点击鼠标
- 匹配相同选项：选中需要匹配的元素，快捷键Ctrl + D（Cmd + D for mac）
8，改变颜色模式&自定义调色板
开发者工具支持在rgba、hsl和hexadecimal来回切换颜色模式和实时编辑预览页面颜色。
实现：
- 改变颜色模式：Shift + 点击鼠标
- 自定义调色板：点击样式区域颜色前面的小方块
9，设备模式&移动仿真
开发者工具能够模拟不同移动设备，快速测试移动端的用户体验，解决调试困难的问题。
- 通过模拟不同的屏幕大小和分辨率来测试响应式的设计效果， 也可以模拟Retina 屏幕；
- 使用网络模拟器来评估你的站点的性能，并且不会影响到其他选项；
- 可视化并审查 CSS 样式；
- 准确模拟设备输入，比如触控事件、地理位置以及设备屏幕朝向。
设备模式的另一个很酷的功能是模拟移动设备的传感器，例如触摸屏幕和加速计，甚至可以更改你的地理位置。
实现：Esc键 → Emulation → Enable emulation → Sensors
10，Workspace编辑本地文件
Workspace把开发者工具变成了一个真正的IDE。将Sources选项卡中的文件和本地项目中的文件进行匹配，直接编辑和保存，不必复制/粘贴到编辑器。
实现：Source左侧面板下右击 → Add Folder to worksapce
你还在用swagger？试试这款api工具，开发效率可以快10倍，大大提升生产力！...(代码片段)
作为软件开发从业者，API调试是必不可少的一项技能，在这方面Postman做的非常出色。但是在整个软件开发过程中，API调试只是其中的一部分，还有很多事情Postman无法完成，或者无法高效完成，比如：AP... 查看详情
这10个奇妙的python库，你必须要试试！
导读：Python有着很多很酷的第三方库，可以使任务变得更容易。今天就给大家分享10个有趣的Python库，每个都非常实用！作者：小F来源：法纳斯特（ID：walker398）这10个库分别是speedtest、socket、te... 查看详情
数字化“乡村小道”跑得不舒服,试试低代码“高速公路”
JNPF上线3年，已覆盖全国33个省市地区、超过10万的企业用户。在去年12月，引迈信息入选了中国科学院发布的《互联网周刊》的《2022低代码50强》榜单，如此成绩，JNPF固然瞩目，但其背后的低代码赛道更是值得拆解、思考。低代... 查看详情
12个visualstudio调试效率技巧(代码片段)
...de-Effect评估11、在源码中显示线程12、从反编译的IL代码中调试源代码结尾在这篇文章中，我们假定读者了解VS基本的调试知识，如：F5 开始使用调试器运行程序F9 在当前行设置断点F10 运行到下一个断点处F5 从被调... 查看详情
12个visualstudio调试效率技巧(代码片段)
...de-Effect评估11、在源码中显示线程12、从反编译的IL代码中调试源代码结尾在这篇文章中，我们假定读者了解VS基本的调试知识，如：F5 开始使用调试器运行程序F9 在当前行设置断点F10 运行到下一个断点处F5 从被调... 查看详情
10个javascript调试技巧，帮你更好更快地调试代码
...题、降低故障概率、帮助分析逻辑错误等等。而在互联网前端开发越来越重要的今天，如何在前端开发中降低开发成本，提升工作效率，掌握前端开发调试技巧尤为重要。 下面小编就分享一些实用且聪明的JavaScript调试技巧... 查看详情
提升工作效率，请收下这10个办公神器
...0c;压缩后只有200KB左右，真正的轻量又好用，并且开发者承诺永久免费，不扫描硬盘，不上传隐私。MouseInc主要功能有鼠标手势、可自由修改手势宽度，颜色，识别灵敏度等、高质量截 查看详情
visualstudio调试效率技巧(代码片段)
在我们开发软件的过程中，必不可少的过程就是软件调试，那么在VisualStudio中如何进行调试呢？这里主要写给小白的一些建议和用法。在这篇文章中，我们假定读者了解VS基本的调试知识，如：F5开始使用调试器运行程序F9在当前... 查看详情
12个visualstudio调试效率技巧(代码片段)
目录1、运行到光标位置2、通过点击鼠标，运行到当前位置3、在此处作为下一条要执行的语句4、数据断点：当值发生变化时，触发中断（值更改时中断）5、条件断点6、跟踪断点7、跟踪超出作用域的对象8、查... 查看详情
12个visualstudio调试效率技巧(代码片段)
目录1、运行到光标位置2、通过点击鼠标，运行到当前位置3、在此处作为下一条要执行的语句4、数据断点：当值发生变化时，触发中断（值更改时中断）5、条件断点6、跟踪断点7、跟踪超出作用域的对象8、查... 查看详情
前端调试各种收集(代码片段)
...下班无数次通过调试解决问题的经验告诉我，调试绝对是开发者最应该掌握的重要技能之一。调试能帮助我们定位问题解决问题，每解决一个问题，经验值就往上涨。后面就可以考经验解决很多问题，并且能正确避开当年踩过的... 查看详情
低版本xcode真机调试高版本ios的解决方法
...Springboard三天崩溃一次，基本不影响使用。而开发中真机调试问题不少。手头的项目Xcode从9升到10是无法编译通过的，有大量的cannotinvokeinitializerfortype''withnoarguments错误。尝试修改File->WorkspaceSettings->BuildSystem为LegacyBuildSy... 查看详情
编码入门
一.编码基本功1.前言根据实践数据可以看出，调试时间占据了我们开发时间中的最大部分，普遍能到60%。如果我们有方法大幅消减调试阶段的时间，效率自然能够大幅提升。通过什么手段能够做到？写好代码，以模块化为中心指... 查看详情
学习效率不高，换个思路试试
其实今天要说的，都在下面这个图里。我们小时候学语言也是，不是从识字，拼音开始的，是自然的语言沟通环境，逐渐学会听，讲，自由表达，然后才回去补识字，补拼音。而自由表达的过程... 查看详情
学习效率不高，换个思路试试
其实今天要说的，都在下面这个图里。我们小时候学语言也是，不是从识字，拼音开始的，是自然的语言沟通环境，逐渐学会听，讲，自由表达，然后才回去补识字，补拼音。而自由表达的过程... 查看详情
提升前端开发效率及查错能力的小技巧(代码片段)
前言 作为一个快五年开发经验的前端工程师，在工作中感到最痛苦的除了无止境的改需求之外，就是调试bug阶段了，有时候开发一个网站也就两个星期左右，但调试起bug来一调就是几个小时！浪费时间不说，效率又低，作为... 查看详情
flutter入门这一篇效率文章就够了
...和理解Flutter。我们先看一下目前的一些跨平台方案，从前端渲染的角度来分类的话，大致可以分为以下几种方案。WebView渲染这种方案就很好理解，现在很多项目都会嵌入H5的页面。就是用JavaScript等前端技术进行开发，在客户端... 查看详情
如果你有一台mac，建议试试这款效率神器——alfred(代码片段)
Alfred按键是直接打开文件，Command+Enter表示打开文件所在文件夹；Command+L居中放大显示结果；命令+空格+待搜索的文本，列出磁盘中包含该文本的相关文件，这个功能很推荐。比如，你想要搜索你之前某个含有`powerpack`关键字的文... 查看详情