前端開發工程師 - 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