[program] dev tools

vscode

大多与webstorm类似

命令	作用
Ctrl + F	查找
Ctrl + H	查找替换
Ctrl + Shift + F	整个文件夹中查找
Ctrl + B	全屏切换
Ctrl + D	快速选中相同，用于批量修改
ctrl + /	单行注释
alt + shift + A	多行注释
alt + enter	换行
Ctrl+Tab	切换tab
Alt+ Left 或 Right	也可以切换tab
ctrl + shift + [	折叠选中区域代码
ctrl + shift + ]	展开选中区域代码
ctrl + `	打开终端
ctrl + shift + p	命令面板
Alt+Up 或 Alt+Down	上下移动一行
Shift+Alt+Up 或 Shift+Alt+Down	向上向下复制一行
Ctrl+Enter	在当前行下边插入一行
Ctrl+Shift+Enter	在当前行上方插入一行
按住alt点击多处	可以同时修改多处代码,也可以按住alt移动某段代码
Ctrl+P	打开主命令框

Ctrl+P主命令框相关操作

? 列出当前可执行的动作

! 显示 Errors或 Warnings，也可以 Ctrl+Shift+M

: 跳转到行数，也可以 Ctrl+G 直接进入

@ 跳转到 symbol（搜索变量或者函数），也可以 Ctrl+Shift+O 直接进入

@:根据分类跳转symbol，查找属性或函数，也可以Ctrl+Shift+O后输入:进入

# 根据名字查找 symbol，也可以 Ctrl+T

快捷键PDF
vscode 文档

常用插件:

• Solarized Light (vscode自带) 颜色主题
• vscode-icons 文件图标主题
• Beautify css/sass/scss/less 帮助格式化css类文件,Beautify也可以做到,但是Beautify不识别JSX
• Better Comments 强化注释
• GitLens 主要是实时查看git blame
• Git History 查看文件修改记录
• Open in Browser 打开html在浏览器
• Auto Rename Tag 帮助自动重命名相关的html标签,自动闭合vscode自带,目前还没有能在jsx自动闭合的插件
• Eslint 代码校验
  其他各种snippets

自定义设置:

  "workbench.colorCustomizations": {
    "editor.background": "#FFEFDB",
    "sideBar.background": "#FFEBCD",
    //"activityBar.background": "#B2DFEE",
  }

更多颜色设置

webtorm

命令	作用
ctrl + f	查找
ctrl + r	替换
ctrl + shift + f	项目内查找
ctrl + shift + r	项目内替换
ctrl + alt + T	围绕包裹代码
ctrl + x	剪切(删除)行，不选中，直接剪切整个行，如果选中部分内容则剪切选中的内容
ctrl + /	单行注释 //
ctrl + shift + /	块注释 /**/
ctrl + shift + up/down	行移动
shift + alt + up/down	块移动(if(){},while(){}语句块的移动)
ctrl + F4	关闭当前代码选项卡
alt + ←/→	切换代码选项卡
ctrl + ←/→	以单词作为边界跳光标位置
ctrl + alt + L	格式化代码
shift + tab/tab	减少/扩大缩进（可以在代码中减少行缩进）
ctrl + G	到指定行的代码
ctrl + ]/[	光标到代码块的前面或后面
alt + up/down	上一个/下一个方法
ctrl + Y	删除一行
shift + delete	删除一行
shift + enter	重新开始一行（无论光标在哪个位置）
ctrl + D	复制当前行
ctrl + W	选中单词
F2 或 Shift+F2	高亮错误或警告快速定位
写代码，按Tab	生成代码
Ctrl+B 或 Ctrl+鼠标左键单击	快速打开光标处的类或方法
Ctrl + Alt + B	Go to implementation(s) 跳转方法实现处
Ctrl + Delete	Delete to word end 删除文字结束
Ctrl + Backspace	Delete to word start 删除文字开始
ctrl + alt + f12	打开文件位置

webstorm 是自动保存的，ctrl + s不是必须操作。
webstorm 有Local History。

chrome

Ctrl+Shift+I / F12

测试打印样式：(似乎没卵用)
More tools -> Rendering ->Emulate CSS media ->print

chrome://inspect/#devices 调试安卓里的网页

Source

ctrl + p/o 定位文件。
ctrl + shif + o 文件中定位成员函数。
Ctrl + G 跳到指定行。
Ctrl + D 选择下一个匹配项。
ctrl + shift + e 在控制台运行当前选中的代码片段

Pause on exceptions 代码在发生错误处进入断点
Resume script execution (F8) 代表进入下一个断点
Step over next funciton call (F10) 代表进入下一个函数执行
Step into next funciton call (F11) 代表进入该断点的执行函数,不同的选中会进入不同的执行函数
Step out of current funciton (shift + F11) 代表退出当前执行函数,返回上一级

Elements

撤消更改 Ctrl + Z
恢复更改 Ctrl + Y
检查元素工具 Ctrl + Shift + C
ctrl+f 查找指定dom。
可以在Settings里开启展示shadow dom。

Console

可以转json格式。
console.time 与 console.timeEnd 集合使用计时
shift+enter可以换行编写不直接输出

$_ 表示上次的计算结果
$0 获取当前选中的DOM
$1 $2 $3 是获取前几次选的dom
$()返回第一个匹配 CSS 选择器的元素。也是 document.quertSelector() 的快捷方式
$$()返回包含所有匹配 CSS 选择器的一个数组。是 document.querySelectorAll() 的一个别名。
$x() 返回一个匹配特定 XPath 的数组
$_helper允许你获取控制台的最后结果。

Network

Chrome限制每个域名最多执行6个TCP连接

紫色垂直线代表DOMContentLoaded
橙色垂直线代表完全加载时触发load

Queuing(排队):

• 请求被渲染引擎推迟，因为它被认为比关键资源（如脚本/样式）的优先级低。这经常发生在 images（图像） 上。
• 这个请求被搁置，在等待一个即将被释放的不可用的TCP socket。
• 这个请求被搁置，因为浏览器限制。在HTTP 1协议中，每个源上只能有6个TCP连接
• 正在生成磁盘缓存条目（通常非常快）。

Stalled/Blocking (停止/阻塞):
发送请求之前等待的时间。它可能因为进入队列的任意原因而被阻塞。这个时间包括代理协商的时间。

Proxy Negotiation (代理协商):
与代理服务器连接协商花费的时间。

DNS Lookup (DNS查找):
执行DNS查找所用的时间。 页面上的每个新域都需要完整的往返(roundtrip)才能进行DNS查找。

Initial Connection / Connecting (初始连接/连接):
建立连接所需的时间， 包括TCP握手/重试和协商SSL。

SSL:
完成SSL握手所用的时间。

Request Sent / Sending (请求已发送/正在发送):
发出网络请求所花费的时间。 通常是几分之一毫秒。

Waiting (TTFB) (等待):
等待初始响应所花费的时间，也称为Time To First Byte(接收到第一个字节所花费的时间)。这个时间除了等待服务器传递响应所花费的时间之外，还捕获到服务器发送数据的延迟时间。

Content Download / Downloading (内容下载/下载):
接收响应数据所花费的时间。(从接收到第一个字节开始，到下载完最后一个字节结束)

Audits

分析页面性能

cmder

1. 把 cmder 加到环境变量
2. 执行Cmder.exe /REGISTER ALL添加 cmder 到右键菜单

转载于:https://www.cnblogs.com/qingmingsang/articles/8502662.html