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
常用插件:
- 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
- 把 cmder 加到环境变量
- 执行
Cmder.exe /REGISTER ALL
添加 cmder 到右键菜单