正文

#前端浏览器调试工具使用技巧(代码片段)

爱码代码的喵  爱码代码的喵  2022-12-05  326

关键词：

前端浏览器调试工具使用技巧

文章目录

前端浏览器调试工具使用技巧

调试hover后出现的元素

方法一

打开调试窗口F12，鼠标移动到需要调试的元素上面
右键不做任何操作
鼠标移动到调试窗口再按下N，出现的元素不会消失

方法二

在调试窗口选中触发鼠标事件的div上，将:hov的属性设置为:hover

JS 断点调试

debugger方式

在js中写上debugger浏览器调试窗口就可以使用debugger模式

直接在调试窗口打断点

在浏览器调试窗口源代码中打上断点即可调试
F10下一步、F8全部执行

浏览器快捷键

放大内容 CTRL + +
缩小内容 CTRL + -
回到正常大小 CTRL + 0
标签页切换 CTRL + 1~9 (1~9 分别代表第一个标签，第二个标签…)
打开新的标签 CTRL + T
搜索内容 CTRL + F
回到上一页 CTRL + 左箭头
回到下一页 CTRL + 右箭头
刷新页面 CTRL + R

Console 使用

console.table：具象化地展示JSON和数组数据

Overrids 使用本地 Js 替换服务上的 Js

浏览器 f12 Sources Overrides点击下面的加号添加一个零时本地目录
在到page页面找到要替换的文件右键另存为覆盖，这时候右侧这个文件会有 *将自己的js内容拷贝到这个文件中之后 ctrl+s保存，然后刷新浏览器，这时候加载的就是这个你替换了的js，可以很好的调试线上的内容

F12

ctrl+shift+p 调出命令行

screenshot 截屏
show animations 打开动画面板

元素（Elements）

查看元素代码，箭头（或用者用快捷键Ctrl+Shift+C）进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置。

修改元素的代码与属性：可直接双击想要修改的部分，然后就进行修改，或者选中要修改部分后点击右键进行修改
在styles中点击颜色会弹出取色器

使用$0获取当前元素

网络（Network）

查看Network基本信息,请求了哪些地址及每个URL的网络相关请求信息都可以看的到URL，响应状态码，响应数据类型，响应数据大小，响应时间。
请求URL可进行筛选和分类，选择不同分类,查看请求URL,方便查找
模拟调节网速
右键请求 Replay XHR（场景：想要重新发送某个请求，但不想刷新页面或手动触发事件）

Console

输入日志执行js，在debugger的时候可以输入变量的值
console.clear() 清空控制台
$_：上一个表达式的结果

Ctrl+P

快速搜索文件，打开你项目的文件。

Vue 查看打包后文件的大小占比

使用webpack-bundle-analyzer

安装webpack-bundle-analyzer：

npm install webpack-bundle-analyzer --save-dev

配置webpack.config.js文件：

// webpack.config.js 文件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports=
  plugins: [
    new BundleAnalyzerPlugin()  // 使用默认配置
    // 默认配置的具体配置项
    // new BundleAnalyzerPlugin(
    //   analyzerMode: 'server',
    //   analyzerHost: '127.0.0.1',
    //   analyzerPort: '8888',
    //   reportFilename: 'report.html',
    //   defaultSizes: 'parsed',
    //   openAnalyzer: true,
    //   generateStatsFile: false,
    //   statsFilename: 'stats.json',
    //   statsOptions: null,
    //   excludeAssets: null,
    //   logLevel: info
    // )
  ]

配置package.json 文件


 "scripts": 
    "dev": "webpack --config webpack.dev.js --progress"

启动脚本访问地址

Vue devtools 工具使用

使用微软 Edge浏览器，再插件商店中安装 Vue devtools插件

出现问题

Vue DevTools Devtools inspection is not available 使用问题：插件已经在当前页探测到了 vue.js 但可能由于作者禁用了调试功能，或者处于生产模式中，所以不能使用 Vue DevTools 插件
把引入的文件改为 vue.js 而不是 vue.min.js
在main.js 中设置 Vue.config.devtools = true;
当检测到页面中使用了 vue 的时候， Vue Devtools 插件会在调试窗口中新加入一个 vue 标签。如果没有显示这个标签，关闭调试窗口再打开即可。

使用开发者工具(代码片段)

浏览器开发者工具使用技巧在前端的工作和学习过程中，往往会遇到以下问题：图片无法加载、样式不正确、JS无法执行、无法调试手机页面、与后台对接出错等。那么我们排查和处理这些问题的方法就是学会使用浏览器开发者... 查看详情

前端调试效率低？试试这10个“chrome开发者工具”使用技巧

天给大家分享一些使用“Chrome开发者工具”的小技巧。包括调试，优化页面渲染速度等。希望能提升Web开发人员的工作效率。 1，打开ShadowDOM显示浏览器对例如Video、Password等组件进行了封装，无法查看到组件的详细代... 查看详情

借助freehttp为任意移动端web网页添加vconsole调试(代码片段)

...调试面板。使用vConsole的项目可以让手机上的Web浏览器，拥有类似PC调试工具的能力。正常情况下使用vConsole需要修改项目查看详情

[转帖]前端-chromef12谷歌开发者工具详解console篇(代码片段)

...一下chrome前端知识等. 大家都有用过各种类型的浏览器，每种浏览器都有自己的特色，本人拙见，在我用过的浏览器当中，我是最喜欢Chrome的，因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的... 查看详情

webstorm那些事之调试（debug）前端代码(代码片段)

...不可少的。而在调试前端代码的时候很少用，都是在浏览器控制台看代码的console来观察变量值，单使用浏览器调试代码的缺点：不能快速定位到我们编辑器相应代码的地方代码里边会出现很多console.log()，浏览器... 查看详情

android移动端调试—前端开发工具eruda(代码片段)

Eruda通过CDN使用：<scriptsrc="//cdn.bootcss.com/eruda/1.4.2/eruda.min.js"></script> <script>eruda.init();</script>通过npm安装：npminstalleruda--saveJs文件对于移动端来说略查看详情

ie浏览器如何调试asp.net的js代码

...了一点，但是也别怕，因为我们有很多调试前端js代码的浏览器工具。比如IE浏览器、firefox浏览器、chrome浏览器等。用哪个浏览器进行调试看个人习惯。小编习惯用IE浏览器。下面小编讲讲如何使用IE浏览器调试Asp.net的js代码。工... 查看详情

浏览器控制台调试工具console(代码片段)

浏览器控制台调试函数console技巧汇总一、基本功能二、断言与统计1.断言2.行数计算3.重置计数3.打印对象，以列表形式输出对象属性三、js性能统计1.性能分析，打印执行性能情况2.输出代码的执行时间3.显示内存信息4.标... 查看详情

如何使用谷歌浏览器chrome更好地调试(代码片段)

💂个人网站:【海拥】【摸鱼小游戏】🤟风趣幽默的前端学习课程：👉28个案例趣学前端💅想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】💬免费且实用的计算机相关知识题库：👉... 查看详情

作为测试和开发调试的工具，你真的了解浏览器开发工具devtools吗？(代码片段)

ChromeDevtools是Web测试时每天都要用的工具，它提供了很多调试功能，可以帮助我们更好的定位问题。而我们平时使用的功能只是它全部功能的子集，很多功能并没用到过。作为高频使用的工具，还是有必要好好掌... 查看详情

作为测试和开发调试的工具，你真的了解浏览器开发工具devtools吗？(代码片段)

vue调试工具vue-devtools安装及使用(代码片段)

...:false改成true 4.编译代码npmrunbuild 5.扩展Chrome插件Chrome浏览器> 更多程序>拓展程序点击加载已解压程序按钮,选择vue-devtools>shells>chrome放入,安装成功如下图 6.vue-devtools使用vue项目,打开f12,选择vue就可以使用了.vue是数... 查看详情

vue调试工具vue-devtools安装及使用(代码片段)

p15:react高级-调试工具的安装及使用(代码片段)

...常使用console.log这种很二的形式来调试程序。其实React在浏览器端是有一个调试工具的，这就是Reactdevelopertools，这个是React人必下的一个调试工具。本文就主要学习一下Reactdevelopertools的下载和简单使用。下载Reactdevelopertool... 查看详情

听说你想用开发者工具调试我的网站？挺可以的啊。25(代码片段)

本篇博客重点为大家介绍，如何禁止用户在浏览器中查看源码，禁用开发者工具调试等前端需求案例已更新到爬虫训练场文章目录禁用右键，禁用F12禁用ctrl+U查看源代码，禁用ctrl+shift+i打开开发者工具实... 查看详情

听说你想用开发者工具调试我的网站？挺可以的啊。25(代码片段)

numpyc语言源代码调试

...很多人推荐gdbgui，这是一个非常新的调试工具，前端使用浏览器，现在采用这一架构的软件越来越多，可以完全不必依赖庞大的gui类库，安装使用比较方便。开始使用gdbgui遇到了一些困难，怎么也无法开始调试，后来发现是因为... 查看详情