151-5197-5087
扬州华为授权服务中心
当前位置:网站首页 > 网络设备调试 正文 网络设备调试

Chrome 浏览器 - 调试及插件

2024-12-05 21:59:46 网络设备调试 23 ℃ 0 评论

下面总结一下一些chrome浏览器常用的调试方法和插件,这些方法能让开发的工作顺利并且高效

相关参考:

1.Chrome开发工具指南:http://wiki.jikexueyuan.com/project/chrome-devtools/

2.Chrome开发者工具中文文档:http://www.css88.com/doc/chrome-devtools/

一、先来认识一下这些按钮


先来看这张图最上头的一行是一个功能菜单,每一个菜单都有它相应的功能和使用方法,依次从左往右来看 :

1.箭头按钮:

用于在页面选择一个元素来审查和查看它的相关信息,当我们在Elements这个按钮页面下点击某个Dom元素时,箭头按钮会变成选择状态

2.设备图标:
点击它可以切换到不同的终端进行开发模式,移动端和pc端的一个切换,可以选择不同的移动终端设备,同时可以选择不同的尺寸比例,chrome浏览器的模拟移动设备和真实的设备相差不大,是非常好的选择

3.Elements 功能标签页:
用来查看,修改页面上的元素,包括DOM标签,以及css样式的查看,修改,还有相关盒模型的图形信息

4.Console控制台:
用于打印和输出相关的命令信息,例如我们熟知的报错

5.Sources js资源页面:
这个页面内我们可以找到当然浏览器页面中的js 源文件,方便我们查看和调试,有的代码都是压缩之后的代码,我们可以点击下面的{}大括号按钮将代码转成可读格式

调试js代码,肯定是我们常用的功能,找到要调试的文件,然后在内容源代码左侧的代码标记行处点击即可打上一个断点
在调试中如果发现需要修改的地方,也是可以立即修改的,修改后保存即可生效,这样就免去了再到代码中去书写,再刷新回看了
有时候进入后,会走很多底层的封装方法,需要很多步骤才能真正进入这个函数块,此时将鼠标放在此函数上,会出现相关提示,会告诉你在该文件的哪一行代码处

6.Network 网络请求标签页:
可以看到所有的资源请求,包括网络请求,图片资源,html,css,js文件等请求,可以根据需求筛选请求项,一般多用于网络请求的查看和分析,分析后端接口是否正确传输,获取的数据是否准确,请求头,请求参数的查看

以上我选择了All,就会把该页面所有资源文件请求下来,如果只选择XHR 异步请求资源,则我们可以分析相关的请求信息
打开一个Ajax异步请求,可以看到它的请求头信息,是一个POST请求,参数有哪些
还可以预览它的返回的结果数据,这些数据的使用和查看有利于我们很好的和后端工程师们联调数据,也方便我们前端更直观的分析数据

7.Resources/Application标签页

会列出所有的资源,以及HTML5的Cookies和LocalStore等,你可以对存储的内容编辑和删除

二、chrome插件

1.FE助手:包括字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成器、编码规范检测、页面性能检测、页面取色。

2.Vue.js devtools:是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展。做前端开发的IT工程师应该比较熟悉这款工具,可以边侧边栏窗格中的页面,边检查代码。

3.Postman:输入你的请求,选择好请求的method,需要请求参数的挨个填好,send之后,就可以看到返回的数据,这个小工具很利于我们的开发。

4.EditThisCookie:一个cookie管理器。你可以添加,删除,编辑,搜索,锁定和屏蔽cookies。

版权说明:如非注明,本站文章均为 扬州驻场服务-网络设备调试-监控维修-南京泽同信息科技有限公司 原创,转载请注明出处和附带本文链接

请在这里放置你的在线分享代码
«    2024年12月    »
1
2345678
9101112131415
16171819202122
23242526272829
3031
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
搜索
最新留言
    文章归档
    网站收藏
    友情链接