前端开发工程师 - 01.页面制做 - 第2章.开发、调试工具

第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里

文档：

 

1. Chrome 调试器文档：https://developer.chrome.com/devtools

2. Firefox调试器文档，也能够用Firebug来调试：https://developer.mozilla.org/zh-CN/docs/Tools/Debugger

3. IE调试器文档：https://msdn.microsoft.com/library/bg182326(v=vs.85).aspx

Puer:

Puer是一个能够实时编辑刷新的前端服务器，咱们在后续课程的演示中会常常用到他。当你修改文件保存后，你再也不须要切到浏览器中手动刷新。

Puer相关文档：https://github.com/leeluolee/puer