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

文章目录

前端浏览器调试工具使用技巧
- 调试hover后出现的元素
- - 方法一
  - 方法二
- JS 断点调试
- - debugger方式
  - 直接在调试窗口打断点
- 浏览器快捷键
- Console 使用
- Overrids 使用本地 Js 替换服务上的 Js
- F12
- - ctrl+shift+p 调出命令行
  - 元素（Elements）
  - 网络（Network）
  - Console
  - Ctrl+P
- Vue 查看打包后文件的大小占比
- - 使用webpack-bundle-analyzer
- Vue devtools 工具使用
- - 出现问题

调试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 标签。如果没有显示这个标签，关闭调试窗口再打开即可。

# 前端浏览器调试工具使用技巧相关推荐

改善前端优化的有用技巧
改善前端优化的有用技巧 1.缓存JavaScript和CSS样式尽可能少地向服务器发出请求.记得10年前,一个页面上要加载5-6个JS,但理想情况下,你应该有一个JS文件和一个CSS文件,这就足够了 ...
浏览器调试工具网页性能分析中的使用
IE.chrome.firefox等按F12可以掉出它们自带的页面调试工具,作为测试当然不能非常精通在页面上修改样式,调试页面jsp,js,但是却可以很轻松的使用它来分析网页的性能优化项. 基础篇现 ...
前端工程师前端性能优化及技巧分享--本文转载自360问答
为什么要优化性能对于前端工程师如此重要在行业内有句话不知道大家有没有听说过,'懂得性能优化并且研究过jquery源代码的人和不懂得性能优化写出来的代码对于性能的消耗会相差上百倍甚至上千倍',现在的j ...
Web前端学习有哪些技巧?
想要学好web前端技术,在学习过程中找到合适的方法和技巧,那么在实际学习过程中会更加的容易和快速掌握知识重点,尤其是对于初学者尤为关键,下面小编就为大家详细的介绍一下Web前端学习有哪些技巧?希望能够 ...
JS~~~ 前端开发一些常用技巧模块化结构命名空间处理奇技淫巧！！！！！！...
前端开发一些常用技巧模块化结构 &&&&& 命名空间处理奇技淫巧!!!!!!2016-09-29 17 ...
火狐怎么放大页面？火狐浏览器页面放大技巧
和许多浏览器产品一样,火狐浏览器也支持用户对当前页面进行缩放.当然,不同浏览器产品,页面缩放功能隐藏的位置也各不相同!那么,火狐怎么放大页面呢?下面是小编分享的火狐浏览器页面放大技巧,感兴趣的朋友可不 ...
新版火狐浏览器怎么调整字体火狐浏览器字体调整技巧分享
相信有了解的朋友都清楚,官方在新版火狐浏览器中不仅优化了UI设计,还带来了一些细微的变化与改进.那么,新版火狐浏览器该怎么调整字体呢?下面小编就来分享一下火狐浏览器字体调整技巧,有需要的朋友可以稍作参 ...
Web浏览器调试工具firebug
出处:http://www.cnblogs.com/starof/p/5416895.html 一.Firebug工具简介 firebug是firefox下的一款开发类插件.firebug集html查 ...
WEB前端浏览器兼容性问题(PC端及移动端)
WEB前端浏览器兼容性问题(pc端及移动端) PC端 (一)html部分1.H5新标签在IE9以下的浏览器识别 <!--[if lt IE 9]> <script type=&quo ...

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

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

文章目录

调试hover后出现的元素

方法一

方法二

JS 断点调试

debugger方式

直接在调试窗口打断点

浏览器快捷键

Console 使用

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

F12

ctrl+shift+p 调出命令行

元素（Elements）

网络（Network）

Console

Ctrl+P

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

使用webpack-bundle-analyzer

Vue devtools 工具使用

出现问题

# 前端浏览器调试工具使用技巧相关推荐

最新文章

热门文章