调试零碎知识

原创 前端工程师_钱成 教程 工具 294阅读 2018-04-15 12:09:23 举报

一、debugger
1、在js代码里写debugger;
2、刷新网页;
3、按f12
4、触发debugger所在的代码块
5、按f8(暂停/继续)、f10(单步执行,不会进入函数内部)、f11(单步进入,会进入函数内部)

二、webStorm设置
1、Ctrl+滚轮:放缩字体大小
file----setting----editor----general----(勾选)change font size (zoom) with ctrl+mousewheel----(点击)OK
2、去掉右侧竖线
file----setting----editor----general----appearance----show right margin (configured in code style options)
3、设置字体大小(Consolas, 'Courier New', monospace)
file----setting----editor----color&font----font
4、创建文件名后缀
file----new----edit file templates...----(点击)+----Name(任意填),Extension(填后缀名)----(点击)OK
5、webstorm设置ES6
file----setting----languages&frameworks----javascirpt----templates----language for comments----ECMAscript6----(点击)OK
6、设置快捷键
file----setting----editor----live templates----(点击右侧)+----(点击)1.live templates
7、取消撤销: ctrl + shift + z (使用前需要把搜狗输入法调至英文输入状态)
8、Ctrl+Alt+L:格式化代码
9、Ctrl+N:搜索类
10、Ctrl+H:查看类继承关系
11、Ctrl+Shift+N:按文件名搜索
12、Alt+F7:查找函数或变量在哪被使用
13、Shift+Shift:(A)类,文件,配置项,快捷键,函数,路径等等都能搜索。(B)搜索时,搜索字符串带/就可以搜索路径了
14、WebStorm手机端页面适配快捷键
(1)输入: meta:vp
(2)再按tab键就出来了.
(3)这行代码,会将HTML5自动适配成手机端页面
15、常用快捷键,https://www.cnblogs.com/wanglexueshilengde/p/8390730.html
16、设置自定义代码块:file--setting--editor--live template--"+"
17、WebStorm更换背景颜色的方法:file--setting--Appearance & Behavior--Appearance--点击下拉箭头--选择--OK
三、VSCode设置
1、VSCode关闭右侧预览功能
file----preference----setting----搜索"editor.minimap.enabled"
2、VSCode修改字体大小
file----preference----setting----Font Zize
3、VSCode修改字体
file----preference----setting----Font Family
4、vscode设置颜色主题
file----preference----Color Theme
5、vscode同时打开多个文件
单击:新的文件覆盖旧文件
双击:新的文件不会覆盖旧文件
6、VSCode设置成中文语言环境
打开vscode =>Ctrl+Shift+p=>configure display language=>确定=>“locale”:“zh-CN”=>重启vscode工具=>商店(最左侧最下方图标)=>Chinese(Simplied) Lang=>安装。
7、VSCode菜单栏隐藏与显示
隐藏:查看=>切换菜单栏
显示:ctrl+shift+p=> view:toggle menu bar
8、VSCode活动栏隐藏与显示
隐藏:右键资源管理器=>隐藏活动栏
显示:查看——外观——显示活动栏
左右切换:右键资源管理器=>将侧边栏移到左/右侧
9、vscode 自动折行
文件=>首选项=>设置=>on(editor:word wrap)
10、VSCode改左侧窗口字体大小
在vscode安装目录下:C:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench
找到workbench.main.css文件,打开并找到“.part>.content{font-size:”进行修改
11、vs code预览
安装view in browser--右键html--点击view in browser
12、vscode 快速生成html
点击新建文件--命名1.html--在空html中输入"!"--按下tab键。
13、vscode 修改选项卡字体
在vscode安装目录下:C:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench
找到workbench.main.css文件,打开并找到“.title .title-label a{text-decoration:none;font-size:”进行修改
14、VSCode滚轮改变字体大小
file----preference----setting----搜索"mouseWheelZoom"(单词之间没有空格)----勾选
15、vscode设置缩进2个空格
file----preference----setting----Editor:Tab Size----2
16、vscode设置选项卡高度
在vscode安装目录下:C:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench
找到workbench.main.css文件,打开并找到下列三项,进行设置。
.title .editor-actions{cursor:default;flex:initial;padding-left:4px;height:
.tab{position:relative;display:flex;white-space:nowrap;cursor:pointer;height:
.title .tabs-container{display:flex;height:
17、Visual Studio Code修改颜色主题
文件——首选项——颜色主题;
18、vscode如何用谷歌浏览器预览html文件
(1)安装“view in browser”
(2)安装“open in browser”
(3)文件---首选项---设置---输入"open-in-browser.default"---“Chrome”
(4)右键“x.html”---“Open in Default Browsers”

四、vscode快捷键
来源:https://www.cnblogs.com/weihe-xunwu/p/6687000.html
1、注释:
  a) 单行注释:[ctrl+k,ctrl+c] 或 ctrl+/
  b) 取消单行注释:[ctrl+k,ctrl+u] (按下ctrl不放,再按k + u)
  c) 多行注释:[alt+shift+A]
  d) 多行注释:/**
2、移动行:alt+up/down
3、显示/隐藏左侧目录栏 ctrl + b
4、复制当前行:shift + alt +up/down
5、删除当前行:shift + ctrl + k
6、控制台终端显示与隐藏:ctrl + ~
7、查找文件/安装vs code 插件地址:ctrl + p
8、代码格式化:shift + alt +f
9、新建一个窗口 : ctrl + shift + n
10、行增加缩进: ctrl + [
11、行减少缩进: ctrl + ]
12、裁剪尾随空格(去掉一行的末尾那些没用的空格) : ctrl + shift + x
13、字体放大/缩小: ctrl + ( + 或 - )
14、拆分编辑器 : ctrl + 1/2/3
15、切换窗口 : ctrl + shift + left/right
16、关闭编辑器窗口 : ctrl + w
17、关闭所有窗口 : ctrl + k + w
18、切换全屏 : F11
19、自动换行 : alt + z
20、显示git : ctrl + shift + g
21、全局查找文件:ctrl + shift + f
22、显示相关插件的命令(如:git log):ctrl + shift + p
23、选中文字:shift + left / right / up / down
24、折叠代码: ctrl + k + 0-9 (0是完全折叠)
25、展开代码: ctrl + k + j (完全展开代码)
26、删除行 : ctrl + shift + k
27、快速切换主题:ctrl + k / ctrl + t
28、快速回到顶部 : ctrl + home
29、快速回到底部 : ctrl + end
30、格式化选定代码 :ctrl + k / ctrl +f
31、选中代码 : shift + 鼠标左键
32、多行同时添加内容(光标) :ctrl + alt + up/down
33、全局替换:ctrl + shift + h
34、当前文件替换:ctrl + h
35、打开最近打开的文件:ctrl + r
36、打开新的命令窗:ctrl + shift + c
37、函数代码块的注释生成方法:安装插件“Document This”;将光标放置于function上面,快捷键Ctrl+Alt+D;

五、删除(360、unlocker)无法删除的文件
参见:http://www.d9soft.com/school/soft_jiaocheng/37851.html
(1)新建记事本,在记事本内容中写入以下命令:
DEL /F /A /Q \\?\%1
RD /S /Q \\?\%1
(2)将文件另存为:类型为“所有文件”,名字为任意,后缀为“.bat”的文件;
(3)然后将要删掉的文件拖至这个.bat文件上。

六、用cmd在D盘创建目录aaa并进入
(1)window+r
(2)输入cmd,点击确定
(3)输入cd/(回到c盘根目录)
(4)d:(进入d盘)
(5)md aaa
(6)cd aaa
七、安装包
(1)本地本文件夹安装 npm install AAA
(2)本地全局安装 npm install -g AAA
查看本地全局文件的安装位置 npm prefix -g
(3)开发依赖 npm install AAA --save-dev
(4)开发生产依赖 npm install AAA --save
不上线的项目用(1)(2),上线的项目用(3)(4)
八、谷歌浏览器,开启“允许网站运行flash”步骤
设置----显示高级设置----隐私设置----内容设置----flash----(勾选)允许网站运行flash
九、cnpm安装和使用,来源https://npm.taobao.org/
1、安装cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org
2、卸载cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org
3、使用cnpm:cnpm install aaaa或cnpm install node-sass@latest
4、查看npm版本:npm -v
5、查看cnpm版本:cnpm -v
6、npm和cnpm不互斥(4、5可以先后运行,不会干扰或覆盖)
十、安装某个包的某个版本
1、npm install --save-dev react-router@2.8.1
十一、webpack打包基础配置:
1、devServer:开发服务器
2、entry:入口配置
3、output:出口配置
4、module:辅助模块
5、resolve:解析方式
6、plugins: 插件
当白色的选择块完全覆盖了我们要复制的内容(文字)后,松开鼠标左键,按下鼠标右键,会弹出一个快捷菜单,但不用理会了,因此此时已经完成了复制工作了,也就是已经把我们刚在在CMD命令窗口选择的文字已经复制下来了。
十二、webstorm代码冲突解决

附:乌班图
一、乌班图之打开pycharm软件,编辑内容
1、python@ubuntu:~s cd /opt/pycharm-2016.3.1/bin/
2、python@ubuntu:/opt/pycharm-2016.3.1/bin$ sudo su
3、[sudo]python的密码: python
4、root@ubuntu:/opt/pycharm-2016.3.1/bin# ls
4、root@ubuntu:/opt/pycharm-2016.3.1/bin# ./pycharm.sh
二、乌班图之另起命令页面
ctrl+shift+t
三、乌班图之服务器启动
1、python@ubuntu:/opt/pycharm-2016.3.1/bin$ cd/
2、python@ubuntu:/$ ls
3、python@ubuntu:/$ cd home/python
4、python@ubuntu:/$ sudo su
5、[sudo]python的密码: python
6、root@ubuntu:/home/python#workspace cd audit-web/
7、root@ubuntu:/home/python/audit-web# ls
8、root@ubuntu:/home/python/workspace audit-web# python manage.py runserver
四、WebStrom Live Template 建代码块
来源:https://blog.csdn.net/liangrongliu1991/article/details/79626960
1、File—editor—live templates—javascript,+,abbreviation:(简写代码,比如ccc),templates text: (详写代码,比如console.log()),define(勾选,比如javascript,typescript),apply,ok

五、函数注释

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复