第2章--开发、调试工具
开发、调试工具
开发工具：
文本编辑器（轻量级）：Sublime Text; Notepad++; EditPlus...
IDE（功能强大）：WebStorm; intelliJ IDEA; Eclipse...
Sublime Text:
特点：跨平台，启动快；多行选择，方便操作；使用插件；新建Snippets（代码片段）；兼容VIM模式
快捷键：
查找（Cmd+P)
: + 行号 -- 定位到具体的行
@ + 符号 -- 具体的符号（如js的函数名、css的选择器名）
# + 关键字 -- 具体的关键字
命令面板（Cmd+Shift+P)：模糊查找命令
多行选择（Ctrl+D,)
选中多行： Ctrl+Shift+L，课同时操作多行
alt+f3：对同一个变量进行操作
常用插件：
Package Control：添加、更新、卸载插件 https://packagecontrol.io/
Emmet：快速编写HTML/CSS代码
DocBlockr：方便产生函数的注释
SideBarEnhancements：构建菜单增强工具
Terminal：在sublime中直接打开terminal
插件的安装：
安装Package Control：view->show console->follow instructions on https://packagecontrol.io/installation#st3
-> sublime text->preference->package-control->install package->输入想要的插件（如Emmet），回车即可安装
插件的使用：
开发一个页面：
新建文件; cmd+shift+p-> Set Syntax: html；
搭一个页面的框架：! + tab -- 自动生成框架
加一个导航选项：div#nav>ul>li*4>a + tab
js，注释模板生成/**+Enter
保存
在sidebar内右键html文件（not as what I expected: solution: https://stackoverflow.com/questions/28167587/sidebar-enhancement-plugin-installed-but-not-working) -> open in browser.
Snippets：
将代码变成代码片段 Tools->Developer->New Snippet
(<content>代码；<tabTrigger>trigger；<scope>file type)
另存为hello.sublime-snippet即可
在需要该代码片段的时候，输入hello+tab即可
可开启vim的兼容模式：
cmd+shift+p -> preferences settings
打开Preferences.sublime-settings-User中将"ignored_packages"中的Vintage删除即可
调试工具
浏览器->developer-mode
Chrome：
Elements: HTML/CSS
Network: http request/ response
Sources: resources, i.e. js (breakpoint for debug)
Console: write js code for executing
Resources: 网站的本地数据资源，i.e. cookies、storage等
Timeline、Profiles、Audits: 调试页面性能
如何调试：
elements：top-left corner
：select an element in the page to inspect it.
可以直接修改Elements里的代码，会直接显示在browser里
文档：
-
Chrome 调试器文档：https://developer.chrome.com/devtools
-
Firefox调试器文档，也可以用Firebug来调试：https://developer.mozilla.org/zh-CN/docs/Tools/Debugger
-
IE调试器文档：https://msdn.microsoft.com/library/bg182326(v=vs.85).aspx
Puer:
Puer是一个可以实时编辑刷新的前端服务器，我们在后续课程的演示中会经常用到他。当你修改文件保存后，你不再需要切到浏览器中手动刷新。
Puer相关文档：https://github.com/leeluolee/puer