本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列。 版权归原作者所有。 译者在翻译前已经和作者沟通得到了翻译整个系列的授权。 1. $0 在 Chrome 的 Elements 面板中，$0 是当前我们选中的 html 节点的引用。 理所当然，$1…

Lighthouse 是一个开源的自动化工具，根据lighthouse生成的报告来改进网络应用的质量。 使用命令行， 全局安装lighthouse： npm install -g lighthouse即可，然后在终端输入： lighthouse url（想要测试的网址），eg：…

我们开发经常会用到浏览器，但是浏览器的一些机制我们还不是很了解，代码如何在浏览器中运行？如何渲染布局？事件触发时浏览器在做什么？很多我们了解的浏览器知识可能不够完善，我们来深入的探讨一下。1.浏览器输

作为一名前端开发人员，你一定经常使用 console.log 来进行开发调试，这当然没什么问题，但你可能不知道，除了 console.log ，浏览器的 Console 对象还包含了许多其他非常有用的方法，让我们一起来领略一下吧。 console.log方法使我们最常使用的了，…

我们总感觉在工作中很少用到，前端安全性问题容易忽视，总结完之后其实发现前端接触不少，比如：浏览器的SameSite、Referer、同源策略、浏览器自带防XSS，不管怎么说，安全防护是必不可少的。 面试的时候多次被问到安全问题，但是自己只能在平时学习的基础上回答上几点，覆盖不全…

这一博客系列由四部分组成，将从高级体系结构到渲染流程的细节来窥探 Chrome 浏览器的内部。如果你曾对浏览器是如何将代码转化为具有功能的网站，或者你并不确定为何建议使用某一技术来提升性能，那么本系列就是为你准备的。 本文作为此系列的第一部分，将介绍核心计算术语与 Chrome…

chrome是我比较喜欢的一个浏览器，本文作者通过图文并茂的方式向我们展示了Chrome的13个基础使用技巧，我从中发现跟使用Sublime Text2中有很多类似的快捷键，希望你也能从中有所收获。 后来才发现原来按Ctrl+P（cmd+p on mac）,就能快速搜寻和打开你…

1. WEB前端助手(FeHelper) 2. Vue.js devTools 3. React Developer Tools 4. 书签侧边栏 5. EditThisCookie 6. Image Downloader 7. Scroll To Top Button 8. …

console相比大家一定不陌生，平时项目中用的最多的就是console.log()方法吧。但是console相关的方法有很多，涉及的调试面板的相关内容比较广泛，彻底弄清楚它们并在项目中合理使用，有助于我们更好的开发和调试。 如果没了解过console的，似不似惊呆了，cons…