[program] dev tools (vscode) (ide)
vscode
大多与webstorm类似
| 命令 | 作用 |
|---|---|
| Ctrl + F | 当前文件查找 |
| Ctrl + Shift + F | 全局文件查找 |
| Ctrl + H | 查找替换 |
| 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 或 F1 | 命令面板 |
| Alt+Up 或 Alt+Down | 上下移动一行 |
| Shift+Alt+Up 或 Shift+Alt+Down | 向上向下复制一行 |
| Ctrl+Enter | 在当前行下边插入一行 |
| Ctrl+Shift+Enter | 在当前行上方插入一行 |
| 按住alt点击多处 | 可以同时修改多处代码,也可以按住alt移动某段代码 |
| Ctrl+P | 打开主命令框 |
| Ctrl + Shift + \ | 闭合标签中切换 |
| Ctrl+U | 回到上一个光标的位置 |
| Ctrl+K Ctrl+F | 对选中代码进行格式化 |
| Ctrl+g | 跳转到指定行号 |
| Ctrl+Shift+g | 跳转到指定内容 |
| 选中+F2 | 整体修改一个函数或者变量的名字 |
Ctrl + Sfhit + P 命令面板有用的相关命令
Join Lines 将选中内容合并成一行
Transform 将选中内容大小写切换
Sort 将选中内容排序
Ctrl+P主命令框相关操作
? 列出当前可执行的动作
! 显示 Errors或 Warnings，也可以 Ctrl+Shift+M
: 跳转到行数，也可以 Ctrl+G 直接进入
@ 跳转到 symbol（搜索变量或者函数），也可以 Ctrl+Shift+O 直接进入
@:根据分类跳转symbol，查找属性或函数，也可以Ctrl+Shift+O后输入:进入
# 根据名字查找 symbol，也可以 Ctrl+T
常用插件:
- 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 代码校验
- Markdown All in One 主要是为了支持Math
- Markdown Shortcuts 有许多markdown相关编写的快捷键
- NPM 有一些npm的提示
其他各种Snippets
自定义设置:
"workbench.colorCustomizations": {
"editor.background": "#FFEFDB",
"sideBar.background": "#FFEBCD",
//"activityBar.background": "#B2DFEE",
}
"editor.tabCompletion": "on"
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
- 把 cmder 加到环境变量
- 执行
Cmder.exe /REGISTER ALL添加 cmder 到右键菜单
