Web開發必備工具箱

**軟體

毫無疑問，**軟體應該放在你的Web開發工具箱的頂層，如果你想成為一個優秀的開發者，你沒法離開它。很多你日常需要使用的網站在***的干擾下都沒法正常載入。

至於如何**，你應該自己去解決這個問題。有很多**軟體和瀏覽器插件（比如Chrome上的*****）可以選擇，你也可以選擇一些付費的V*P*N提供商，但如果價格超過￥150/年，建議你自己買一個便宜的VPS搭建************伺服器，有一些主機商還提供了一鍵安裝************伺服器的功能，非常方便。

Across the G*reat F*ireW*all, you can reach every corner in the world.

偉大的知乎管理員，現在滿意了嗎？

編輯器

你應該有兩個編輯器，一個用來做項目，一個用來隨手寫一些小的代碼片段。這兩個編輯器，前一個我推薦PyCharm，後一個可以使用Sublime Text或是Atom。

PyCharm是JetBrains出品的IDE（集成開發環境），對Python有很強大的支持。有很多方便的功能，比如雙擊Shift會打開全局搜索（Search Everywhere），你可以搜索文件、類和方法。當你對Flask的一個方法不太熟悉時，只需要雙擊Shift，輸入方法名，點擊相應的條目就可以立刻跳到相應的源碼位置。

它還集成了Python調試器，當你有語法和縮進錯誤，甚至是代碼風格不符合PEP8的建議時，它都會顯示相應的標記，甚至還告訴你為什麼不對……

其他的諸如集成了源碼控制系統，支持創建各種語言的模板等等功能，值得你去探索一番。

PyCharm有免費的社區版可以下載，而學生可以免費獲取專業版（需要教育郵箱或相關證明）。相比社區版，專業版有更多的優秀的功能，對Flask開發有更專業的支持。除了PyCharm，學生還可以獲取JetBrains的全產品包（真是良心企業~）。

具體見：https://www.jetbrains.com/student/

CodePen

在開發過程中，有時候你需要實現一些網頁效果，但是在本地編輯有很多限制，你要在瀏覽器和編輯器之間，或是HTML和CSS文件之間來回切換，有時還要清除瀏覽器緩存以便讓對CSS文件的更改生效，這時你需要一個在線編輯器。CodePen就是一個很受歡迎的在線代碼調試平台。使用它，HTML、CSS、JavaScript和輸出頁面將集中在一起顯示，像這樣：

它有很多方便好用的功能。比如說可以方便的添加外部庫：

你可以在Quick add里找到常用庫，或是自己添加（有搜索功能）。除此之外，還提供了常見的CSS和JavaScript預處理器。

對於新手來說，最有用的該是代碼分析功能了，它可以幫你檢查出代碼的錯誤，甚至有對代碼風格的建議：

還有代碼格式美化的功能（Tidy CSS）也很有用。

CodePen不僅僅是在線編輯器，還是一個開源社區，你可以在上面看到很多JavaScript和CSS的有趣項目。

Chrome插件

因為我使用Chrome，所以在這裡推薦幾個Chrome上比較常用的插件：

Web Developer —— 這是一個非常強大的工具集

不過對於新手來說，這個工具集很多功能可能暫時用不到，那就安裝下面兩個我覺得最基本的兩個工具吧。

MeasureIt! —— 用來測量頁面元素的尺寸

Eye Dropper —— 用來對頁面元素進行取色和調色

更多的工具，你可以到Chrome store里的開發者工具分類下探索：https://chrome.google.com/webstore/category/ext/11-web-development建議：從需求出發選擇和找工具，不要求多，也不要總想找到最好的。

Github

估計大部分人都已經註冊了Github了，如果沒有那麼趕快去註冊一個吧。註冊之後，建議你好好利用它，把你所有的代碼都放在Github上，一來是方便控制版本，二來可以記錄你自己的成長和努力（或是懶惰……）。另外可以多去閱讀別人的代碼，慢慢的，可以嘗試參與一些項目。

除了使用Github來託管項目外，你還可以使用Github Pages來搭建一個靜態博客，它讓你免去買域名和主機的麻煩。

Heroku

Heroku是一個PaaS提供商（雲平台），對Flask有很好的支持。它的免費賬戶很適合做實驗。推薦每一個學習Flask的人都去註冊一個，連接到Github賬號，可以測試自己的小項目，也方便分享給別人。

在Heroku里部署方式選擇Github，選擇你要部署的的項目，不到一分鐘就部署好了（當然，需要一些配置文件）。

每次Github項目有變動，它都可以自動集成部署，很方便。缺點是訪問速度稍慢。有時間我來總結一下在Heroku部署一個Flask應用的最便捷的流程。

CSS調試工具

儘管你可能已經在Chrome下載了很多插件，我還是想推薦一下這個CSS調試工具（好吧，之前已經推薦過了>_<），它很小，只是放在書籤里的幾行JS代碼，但是卻可以幫你找到在初學階段頁面出現的很多問題。它通過改變頁面樣式來讓你對頁面結構一目了然。

使用前：

使用後：

因為知乎放不了這個鏈接，你需要到我的博客，在右邊的工具箱里找到它——Ghost CSS（你可以先點擊它看看發生了什麼……），把它拖到你的書籤欄，然後就可以在每一個你想調試的頁面點擊它。

英語

雖然我把英語放在最後面，這並不說明英語不重要。恰恰相反，英語才應該放在最頂層，即使你有了**軟體，但如果還是使用中文關鍵詞來搜索和解決問題，那麼還不如繼續用百度。這不是能立刻獲得的能力，但卻是你成為一個優秀的程序員路上一個必須解決的問題：

英語水平的高低決定了你學習編程的效率和未來所能達到的高度。

- - - - -

更多關於Flask和Web開發的優質內容，歡迎關注Hello, Flask! - 知乎專欄。

推薦閱讀：