过去几天,我在 Ubuntu Linux系统上遇到了一个奇怪的问题。我用的是 Firefox 浏览器和 Brave 浏览器。Brave 浏览器一直报“network change detection”错误,几乎每次刷新都报错,但是在 Firefox 浏览器中一切正常。 这个问题严重到了几乎不能使用浏览器的地步。我不能用 ......
486
0
0
2022-04-11
前言本文暂未涉及Performance面板的内容。后续会单独出一篇,以下是目录:常用命令和调试黑盒脚本:Blackbox Script控制台内置指令远程调试WebView1、Chrome Devtools 的用处前端开发:开发预览、远程调试、性能调优、bug跟踪、断点调试等后端开发:网络抓包、开发调试Response测试:服务端API数据是否正确、审查页面元 ......
447
0
0
2022-04-11
工欲善其事必先利其器,今天长话短说,介绍13个敏捷、高效的Chrome插件根据使用方式,本人将其划分为三大类:开发者工具日常效率工具类浏览器管理类开发者工具1. Web DeveloperWeb Developer 这款扩展集成了各种各样的 Web 开发工具,几乎是网页开发人员必备的 Chrome 开发者工具扩展插件,Web Developer插件的工具栏很 ......
317
0
0
2022-04-09
​web端产品经理在日常操作系统时,难免会遇到BUG。由于一个系统是由前端开发工程师和后端开发工程师共同开发的,产品经理在提BUG时,如果能定位到问题是出在前端还是后端,提供有价值的信息给到开发工程师,这样能大大提高彼此的工作效率。运用“F12”键打开“开发者工具”,就能灵活定位系统前后端BUG。开发者工具的基本介绍“开发者工具”常用于网站界面测试、调试,分 ......
606
0
0
2022-04-06
配图与本文无关前端开发中,有一个重要的技能,叫做断点调试。利用chrome开发者工具中的断点调试,我们能够一步步观察JavaScript的执行过程,直观感知函数调用栈、作用域链、变量对象、闭包、this等关键信息的变化。因此,断点调试对于快速定位代码错误,以及快速了解代码的执行过程有着非常重要的作用,这也是我们前端开发必不可少的一个高级技能。当然如果你对Ja ......
366
0
0
2022-03-31
1. 查看元素伪类 css 样式例如我想查看元素触发 hover 时的 css 样式。先选中该元素,然后按下图操作:2. 临时增删元素 class3. document.body.contentEditable="true"在控制台输入 document.body.contentEditable="true",就可以对页面直接进行编辑。4. 查看 place ......
337
0
0
2022-03-27
常用 console 命令打印对象解构打印多个变量的时候,单纯打印变量,不显示变量名称,不利于阅读,而用大括号(`{}`)将变量包围起来。这样的优点是不仅会把变量的值打印,同时还会将变量名打印出来。log占位符格式字符(%s)、整数(%d)、浮点数(%f)、根据css格式化字符串(%c)和对象(%o)(%O)使用console.table将复合类型的数据转为 ......
304
0
0
2022-03-27
chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这样不但影响外观,而且有时候拖动textarea还会使页面布局错乱,我们如何解决呢?看下面代码。取消chrome下input和textarea的聚焦边框: input,button,select,textarea{outline ......
339
0
0
2022-03-22
Google Chrome 浏览器默认使用单个 TCP 连接进行下载。可以在设置里启用 Parallel downloading (并行下载)选项来实现下载提速。在 Chrome 地址栏内输入 chrome://flags/#enable-parallel-downloading 并回车;在右侧下拉菜单中选择 ......
368
0
0
2022-03-06