建议使用以下浏览器,以获得最佳体验。 IE 9.0+以上版本 Chrome 31+ 谷歌浏览器 Firefox 30+ 火狐浏览器
请选择 进入手机版 | 继续访问电脑版
设置昵称

在此一键设置昵称,即可参与社区互动!

确定
我再想想
选择版块
直达楼层
标签
您还可以添加5个标签
  • 没有搜索到和“关键字”相关的标签
  • 云产品
  • 解决方案
  • 技术领域
  • 通用技术
  • 平台功能
取消

采纳成功

您已采纳当前回复为最佳回复

前端小盆友

发帖: 15粉丝: 1

发消息 + 关注

更新于2021年02月25日 20:20:59 406 1
直达本楼层的链接
楼主
显示全部楼层
[技术干货] 前端调试机器

## Chrome调试工具 ![image.png](https://bbs-img-cbc-cn.obs.cn-north-1.myhuaweicloud.com/data/forums/attachment/forum/202102/25/1946416mxtydgfysrjdlpr.png) #### 箭头 & Elements ##### **箭头:** 用于在页面选择一个元素来审查和查看它的相关信息。 ##### Elements 内容: + 样式 ![image.png](https://bbs-img-cbc-cn.obs.cn-north-1.myhuaweicloud.com/data/forums/attachment/forum/202102/25/194757x6mhhgmwz9gbreas.png) + 计算属性 ![image.png](https://bbs-img-cbc-cn.obs.cn-north-1.myhuaweicloud.com/data/forums/attachment/forum/202102/25/194818ubcs8xiddehihlld.png) + 事件监听 > 将Ancestors和Framework Listeners两个checkbox取消选中可以看到 选择dom绑定的事件。 ![image.png](https://bbs-img-cbc-cn.obs.cn-north-1.myhuaweicloud.com/data/forums/attachment/forum/202102/25/19485498syfy4vrdtswdyu.png) + DOM breakpoints + 在Chrome开发者工具里,选中想要监控的DOM元素,点击右键,选择Break on->Attributes modifications: ![image.png](https://bbs-img-cbc-cn.obs.cn-north-1.myhuaweicloud.com/data/forums/attachment/forum/202102/25/194930vyblmcvnviuv0ibv.png) + 之后在DOM Breakpoints的tab里能看到对应的断点 + 然后回到Chrome里鼠标悬停百度一下,Chrome开发者工具的调试器就会自动在DOM的属性发生变化的地方停下来: ![image.png](https://bbs-img-cbc-cn.obs.cn-north-1.myhuaweicloud.com/data/forums/attachment/forum/202102/25/195014m4pmhursabbfcgvl.png) + 从调试器的调用上下文能了解到是上图第118行的className 改变了导致DOM断点的触发。 + Properties > 改选项卡里面可以看到 选择dom对象,及类的继承链。 ![image.png](https://bbs-img-cbc-cn.obs.cn-north-1.myhuaweicloud.com/data/forums/attachment/forum/202102/25/195235nmhgfm2ud8xqqlaa.png) #### 设备模拟器 > 模拟移动屏幕,或者一些其它的像素比例的屏幕。 ![image.png](https://bbs-img-cbc-cn.obs.cn-north-1.myhuaweicloud.com/data/forums/attachment/forum/202102/25/195301vmhsnbu9oek0zngc.png) #### Console控制台 > 控制台打印, 执行脚本。 ![image.png](https://bbs-img-cbc-cn.obs.cn-north-1.myhuaweicloud.com/data/forums/attachment/forum/202102/25/195332g2eidbbtv36dtdyn.png) #### Sources ![image.png](https://bbs-img-cbc-cn.obs.cn-north-1.myhuaweicloud.com/data/forums/attachment/forum/202102/25/195348qeupdyr3bfddtzvq.png) #### NetWork ![image.png](https://bbs-img-cbc-cn.obs.cn-north-1.myhuaweicloud.com/data/forums/attachment/forum/202102/25/195402wvgl1f8vwx0fcpou.png) #### Performance ![image.png](https://bbs-img-cbc-cn.obs.cn-north-1.myhuaweicloud.com/data/forums/attachment/forum/202102/25/195415ap0bhda0beswf2qf.png) #### Memory: 内存快照 ![image.png](https://bbs-img-cbc-cn.obs.cn-north-1.myhuaweicloud.com/data/forums/attachment/forum/202102/25/1954370qptqahc0icxkxly.png) ## Vscode内代码调试 #### 调试环境配置 > 在.vscode / launch.json 文件夹为配置文件。(可以快捷键ctrl + p 然后输入 debug 进行快速配置) ![image.png](https://bbs-img-cbc-cn.obs.cn-north-1.myhuaweicloud.com/data/forums/attachment/forum/202102/25/195510wrw7ka6vzelhpqth.png) **参数说明:** ```json "name": "Attach to Chrome", // 调试环境名称 "type": "pwa-chrome", //调试环境运行环境, 取值: node pwa-chrome 或其它自行安装的程序命令 "request": "attach" | "launch", // attach模式: 监听一个启动进程 launch模式: 由vscode 来启动一个独立的debug进程 "url": "http://localhost:8080", // 服务地址 launch模式才会有 "port": 9222, // 端口 attach才会有 "webRoot": "${workspaceFolder}" // 静态资源目录 "cwd": "${workspaceFolder}/dist", // 指定程序启动调试的目录 ,当vscode启动目录不是项目根目录,并且调试npm script时非常有用 "args": ["--no-install"], "outFiles": ["${workspaceFolder}/lib/**/*.js"], //指定 sourceMaps的位置 "skipFiles": [ "<node_internals>/**/*.js", "${workspaceFolder}/node_modules/**/*.js" ], //指定跳过单步调试的代码 "preLaunchTask": "npm: build", // launch之前做的事情 "stopOnEntry": true, //自动断点到第一行代码处 "smartStep": true, //自动跳过未映射到源代码的代码 ``` #### 单个JS调试 > 添加如下配置到launch.json 选择test.js F5 debug模式运行 ```json { "type": "node", "request": "launch", "name": "debug test", "runtimeExecutable": "node", "program": "${workspaceFolder}/code/debugger/test.js", "restart": true, "console": "integratedTerminal", "internalConsoleOptions": "neverOpen" } ``` #### 项目调试 + 安装插件:`Debugger for Chrome` ![image.png](https://bbs-img-cbc-cn.obs.cn-north-1.myhuaweicloud.com/data/forums/attachment/forum/202102/25/195956i5k2fllzldgodgyh.png) + 配置launch.json ```json { "type": "chrome", "request": "launch", "name": "launch project dbug", "url": "http://localhost:8993/drs", "webRoot": "${workspaceFolder}", "preLaunchTask": "debug", "sourceMapPathOverrides": { "webpack://[name]/./*": "${webRoot}/*", "webpack:///src/*": "${webRoot}/*", "webpack:///*": "*", "webpack:///./~/*": "${webRoot}/node_modules/*", }, }, ``` + 配置debug命令 ```json { "version": "2.0.0", "command": "npm", // 运行命令的程序 "tasks": [ { "label": "debug", // Task 名称 "isBackground": true, "type": "npm", "script": "start", // npm 要执行的 script 名称,对应 package.json 中的定义 "detail": "编译至开发环境", // Task 的描述,在命令面板中显示 "group": "test", "problemMatcher": { "fileLocation": "relative", "pattern": { "regexp": "^([^\\s].*)\\((\\d+|\\,\\d+|\\d+,\\d+,\\d+,\\d+)\\):\\s+(error|warning|info)\\s+(TS\\d+)\\s*:\\s*(.*)$", "file": 1, "location": 2, "severity": 3, "code": 4, "message": 5 }, "background": { "activeOnStart": true, "beginsPattern": ".", "endsPattern": "Version: webpack.+" } } } ] } ``` + 运行`launch project dbug` 命令
举报
分享

分享文章到朋友圈

分享文章到微博

采纳成功

您已采纳当前回复为最佳回复
发表于2021年02月25日 22:53:57
直达本楼层的链接
沙发
显示全部楼层

good ,很实用感谢分享

点赞 评论 引用 举报

游客

富文本
Markdown
您需要登录后才可以回帖 登录 | 立即注册

结贴

您对问题的回复是否满意?
满意度
非常满意 满意 一般 不满意
我要反馈
0/200