【每周一转】writeBugAndRewriteBug

最近比较忙，每周一转好久没更新，趁闲下来更新一篇（篇幅超长，干货满多）

  • 编辑神器：vscode
  • 接口测试：postman
  • 调试首选：Chrome devtool
  • 附赠一篇微信公众号转载的chrome插件安装指南和实用快捷键，以及fq小助手安装使用（嘘～）

vscode篇

vscode是我工作以来一直在用的编辑器，吃饭的家伙之一。之前有用过 SublimeText Hbuilder，最终忠于vs code ，它也算是微软的一个良心佳作了。前不久研究它甚至可以用来跑java程序(不推荐使用，需要每次重新打包)，各种插件更是眼花缭乱（实用的不多）把它调成趁手的家伙也是需要一点耐心和精力的。

  • code .：当你想把项目文件夹在vscode中打开时，直接拖拽到图标上是个炫酷的方法，但是个人觉得 linux指令：cd .... -->code . (.代表当前文件夹)更是装逼至极呀（偏爱指令操作）
  • 刷力扣 --这是一个插件搜索安装即可
  • 实用插件--很多很多
  • 运行docker--就在侧边栏方便查看
  • ...

postman篇

之前自己写完的接口喜欢用postman测试一下是否正常，后来一些对接第三方接口的工作也会用到postman，其实大多数提供开放API的平台都会同步给出测试工具， 再往后测试接口都是自己在代码浏览器里测试，postman就落灰了。
但是存在即合理，它还是有很多好用的功能的，一图胜千言，postman的简报精华都在下面那张图里了（网上找的）

Postman的安装及使用

PostMan:用于做接口请求测试,无论是前端,后台还是测试人员,都可以用postman来测试接口,用起来非常方便。

一、安装postman

  1. 安装包安装

  2. 插件包安装

    • 准备了一个配置完整的postman插件包 下载完成后 打开谷歌浏览器打开扩展程序，勾选开发者模式,点击加载文件，选择解压后的插件包。
二、postman使用

  1. 打开谷歌浏览器，点击应用，点击postman。

  2. 原生App直接打开。

  3. 将url复制到输入框中,选好格式,然后点击send,就可以调用了。Body是返回的参数，可以判断是否调用成功.

  4. 可测试接口

  5. 认识界面 界面介绍

  6. 了解简单功能

  7. 实例测试+配置变量

官网教程（英文）

chrome debug 篇

说实话目前自己还处在console.log 水平，会简单的打个断点调试，但vue-devtool用的也还算顺手。下面这段是来自实习简报，深度比较浅，真实来源是掘金的一篇文章（找不到链接了），当初偷懒搬过来的，如果大家真想深入学习还得自行去搜索～

Chrome的开发者模式及debug mode的使用

DevTools是一款功能强大的软件，很容易被低估。 它有许多隐藏的功能，我们甚至常常怀疑是否需要那些。

分模块学习

Elements
  • $的用法
    • $0-$4
    • $ =document.querySelector $$=document.querySelectorAll
    • $_变量是上次执行的结果的引用
  • 查看链接伪类样式
  • Color picker
  • 元素面板像一个编辑器可以进行各种编辑操作
    • 隐藏元素 h
    • 复制粘贴
    • 移动 com+⬆️/⬇️ 拖放
Console
  • 表格形式显示数据 console.table(数据，[属性名...])
  • console.log({}) 不易混淆
  • console.log VS console.dir
  • 添加时间戳
  • 清空console 多行模式 com+K shift Enter
  • console.time() — 开启一个计时器。
  • console.timeEnd() — 结束计时并且将结果在 console 中打印出来。
  • 给你的打印文本加上 %c 然后 console.log 的第二个参数变成了css样式。
Source
  • 工作区相关
    • 在 Chrome 中修改你的文件
    • 工作区支持即时同步样式
    • 为新选择器选择目标位置
    • Workspace 允许 CSS 注入！
Network
  • 隐藏 network overview
  • 按照方法过滤请求
drawer（com+shift+p）
  • theme
  • 检查代码 coverage
  • 检查你修改的内容change
快捷键的使用
  • Switch between 2 recent DevTools placements 在两个最近使用的 DevTools 的展示位置之间切换 ctrl + shift + D
  • 按下 ctrl + [ 和 ctrl + ] 分别从当前面板的分别向左和向右切换面板。
  • 按下 ctrl + 1- 9 转到编号1...9的面板(DevToolsSettings>>Preferences>>Appearance)
  • Increment/decrement 递增/递减
  • 在元素面板中展开所有的子节点 option+click

其实还有odoo篇，实在只是了解个皮毛就不卖弄了囧

其他

over 每周一转系列再有两篇（设计和后端两个方向）文章就结束啦，迫不及待的开始新系列

更新会迟到但是永远不会丢弃。文中转载内容涉及侵权请联系删除～

posted @ 2020-08-03 16:16  十弋  阅读(411)  评论(0)  编辑  收藏  举报