开发与调试

雪姨
131 阅读4分钟

vscode

VS Code 在前端开发人员中是用的比较多的，其他开发人员也有在用的。它的功能无疑也是非常的强大，可扩展性非常的高，哪些是可以提高我们开发效率、质量以及编码体验的功能呢？

必备的插件

  1. 代码段
  • JavaScript (ES6) code snippets
  • vue,vetur, [Vue 3 Snippets]， Vue VSCode Snippets
  1. 代码检查和格式化
  • ESLint, Prettier-Code Formatter, Beautify

辅助类插件

  • Git History

image.png

  • Git Lens

image.png image.png

vscode项目配置

  • 在项目中预设插件

通过预设的插件，可以将项目所需用到的插件，通过预设配置，在项目组中提示统一安装起来。

  • ctrl + ,,或者找到vscode的配置入口点击打开

image.png

  • 找到并打开工作区，勾选配置后保存，根目录会生成一个.vscode目录，并生成settting.json,项目可用共用这份配置

  • 功能-扩展中找到Ignore Recommendations这一项，取消勾选

image.png

  • 打开扩展的显示推荐扩展，或者.vscode目录新建extensions.json文件，配置项目木必备的插件，如下图

image.png

image.png

  • 配置后每次通过vscode打开项目，都会检测是否已安装过插件，如果有没安装的，会在右下角弹出提示窗口提醒开发人员安装

image.png

vscode 其他使用技巧

除了以上的配置公共插件，其他的个性化配置也是在设置这里改
比如编辑器自动保存设置：
选择afterDelay

image.png

快捷键大全:

image.png

  • 通过ctrl + k + s， 可以查看到vscode所有快捷键，可通过点击左边的编辑图标自定义快捷键

常用快捷键

  • ctrl + p: 查找项目中的文件
  • ctrl + ,: 打开vscode 配置
  • ctrl + [: 减少行缩进
  • ctrl + d: 调用方法快速跳转
  • Shift + Alt + F: 当前文件快速格式化
  • ....

调试工具

chrome调试

  • chrome断点

监听dom节点或其子节点变化时用到的断点

1、打开Elements tab页
2、找到需要打断点的element位置
3、右键点击选中的element，在弹出的菜单选择**Break on **，有3种属性可供选择

  1. Break on - Subtree modifications
  2. Break on - Attributes modifications
  3. Break on - Node Removal
  • XHR 断点 在XHR的请求URL包含指定字符串时中断，devTools在XHR调用send（）的代码行上暂停。用于快速定位页面发起请求的url不正确的代码位置。

1、打开Sources tab
2、进入XHR Breakpoints pane（一般就在Breakpoints pane下面）
3、点击面板空白处或者右上角的“＋”添加需要监听的url字符串，回车确定

image.png

image.png

  • Event listener 断点

1、打开Sources tab
2、进入Event listener pane（一般就在Breakpoints pane下面几个）
3、任选一个Event listener

  • Exception 断点

  • 代码 debugger 断点 除了以上操作开发者工具的断点，我们还可以在代码上断点

在需要断点的代码之前添加 debugger，如下图

image.png

在抛出捕获或未捕获的异常的代码行上暂停。

手机浏览器调试

打开手机usb调试：设置>>关于手机>>版本号>>返回设置>>找到开发者模式>>usb调试>>打开手机chrome浏览器

image.png

初始： image.png 改个文案后：

image.png

手机上同时显示：

image.png

前端代码常见bug

  • 常见Http错误码

200:网络正常
404: 网络资源不存在
503: 服务器超时, 5**：服务器...、
...

image.png

抓包工具使用

Fiddler

fiddler是一个常用的抓包工具,它可以抓取记录电脑所有网络请求，它的使用也很广泛，我们前端可以用它来协助调试

1.接口响应数据模拟
2.接口请求状态模拟
3.替换资源
4.抓包查看响应&请求的数据
5.移动端调试
...

1.抓包查看响应&请求数据

image.png

2.接口响应数据模拟 & 接口请求模拟

在列表里找到需要调试的接口，或者直接在右边找到AutoResponder,点击Add Rule,通过输入EXCAT:+url image.png

在下边的local file...中选择常用的模拟方式：

image.png

  • create new response

image.png

模拟前： image.png

模拟后： image.png

3.替换资源

image.png

git

其他常用工具

  • nvm

如果有多个项目维护，经常会遇到nodejs版本不兼容，导致的项目无法正常启动，这种情况下，我们可以使用nvm来管理多个nodejs版本。

image.png

通过nvm install '版本号'可以安装所需的nodejs版本
通过nvm use '版本号'可切换版本

  • chrome扩展插件

1.Json viewer 调试过程中有时候需要单独访问接口，要在浏览器查看JSON格式的数据一般情况下是这样子的

image.png

如果数据多了，密密麻麻，不利于直接访问观看\

可以使用chrome的扩展插件 Json viewer

image.png

这时候看到的显示不一样

2.Vue devtools

vue devtools插件在vue项目开发调试过程中必备的插件，通过使用它调试，我们可是实时看到当前数据的变化，

image.png

avatar
文章
阅读
粉丝