標籤：

本人前端，剛入手了mac本，以前沒用過，請各位大大推薦一下mac本上做前端的編碼開發或者調試輔助工具？

01-05

包括移動端開發和pc端開發。

可以參考這裡：GitHub - jaywcjlove/awesome-mac: ? This repo is a collection of awesome Mac applications and tools for developers and designers.

以下為一個網友的推薦，僅代表個人建議。

文檔查看

Dash

寫代碼的時候是不是有些API記不住，比如畫橢圓該用哪個類？計算開平方用什麼函數？怎麼連接遠程的mysql伺服器檢索數據？這個時候一般怎麼辦？問度娘？問谷歌？直接查看在線編程文檔？

在國內問谷歌需要翻牆，那麼涉及到另外工具的使用。查看在線文檔，如果記不住入口網址怎麼辦？放收藏里啊，如果入口改變了呢？還是需要問搜索引擎啊！那麼問題來了，度娘亂貼小廣告咋辦？用Dash吧，一個APP搜羅了這個世界上幾乎所有的編程語言文檔，而且更新速度快。

軟體主頁以及下載地址Dash for macOS

流程圖設計

OmniGraffle有很多人推薦，不過筆者覺得這個軟體太貴了，所以推薦了兩款免費的軟體流程設計工具。

XMind

主攻腦圖（思維導圖），流程圖也支持，另外還有日程安排計劃等額外的功能。

軟體主頁以及下載地址XMind: The Most Popular Mind Mapping Software on The Planet.

Gliffy Diagrams

並不是一個獨立安裝的APP，而是作為Chrome的插件，可以去Chrome的App Store下載安裝，很輕量，運行速度快。

軟體主頁Gliffy | Online Diagram and Flowchart Software

文本編輯器

不僅限於代碼編輯，一款好的編輯器會讓你的編輯工作充滿愉悅。

MacVim

為什麼我一開始不推薦時下流行頭牌Sublime呢？因為，我用vi/vim已經超過十年的時間了。當初在學校，vm/emacs二選一，我選擇了更容易上手實踐的vi，從此一直用它來查看／編譯文本／代碼。

軟體主頁以及下載地址MacVim by macvim-dev

MacDown

一般代碼查看和編輯用Vi就夠了，剩下其他的文檔，恩，現在大多數文章／文檔採用的MarkDown語法編寫，所以用一款MarkDown編輯器就夠了。比如本文的編寫，我用的MacDown編輯器，文章語法採用MarkDown語法。既然是MarkDown編輯器，那麼有人會提到用Mou，筆者也試用過一段時間，遇到了一些問題，比如語法支持和界面顯示，後來改用MacDown，覺得各方面都支持的不錯，所以一直使用。

軟體主頁以及下載地址MacDown: The open source Markdown editor for OS X.

Sublime Text

如果你不是一路走著linux從事開發的話，估計很難對Vi/Emacs熟悉。那麼，像note++或者ultraedit這類第三方編輯器會是你比較不錯的選擇。相比於集成開發環境IDE的笨重，運行慢和耗內存，選擇一個輕量級的編輯器是在平時比較頻繁的非常規查看／編輯代碼／文檔時一個不錯的選擇。那麼，以前那些用第三方編輯器的用戶都去哪兒了？應該就是這個Sublime Text了吧。

軟體主頁以及下載地址Sublime Text: The text editor you"ll fall in love with

圖片編輯器

寫文章擼代碼，除了文字的處理外，還需要有美圖的點綴和襯托。更多時候，圖是吸引流量和眼球的一種重要手段。

GIMP

為啥不用Adobe Photo Shop呢？太貴，太複雜。那麼，好吧，這裡筆者推薦用GIMP，PS該有的，它基本都有。

軟體主頁以及下載地址http://www.gimp.org/

集成開發環境IDE

集成開發環境一般是集編輯，編譯，鏈接，調試，版本管理和打包發佈於一體的大型開發軟體。它的特點是功能豐富，上手快，易操作。缺點也顯而易見，笨重，運行速度慢，需要更多的CPU，內存資源。

Eclipse

老牌萬金油型集成開發環境，上手快，支持幾乎所有語言，但是近幾年使用人數在下滑，逐漸轉向Android Studio和IntelliJ IDEA了。

軟體主頁以及下載地址Eclipse Neon

Android Studio

安卓程序猿專屬開發環境。

軟體主頁以及下載地址https://developer.android.com/studio/index.html

IntelliJ IDEA

Eclipse替代品，支持市面上大部分流行的開發語言和框架，上手快，界面更加人性化，現代集成開發環境的典範。

軟體主頁以及下載地址https://www.jetbrains.com

Xcode

蘋果公司官方唯一指定的Object-C與Swift集成開發環境。

軟體主頁以及下載地址https://developer.apple.com/xcode/

分析調試類

APP寫好了，安裝到設備，但是從網路拉取圖片顯示失敗了，怎麼破？APP打安裝包後想看下包裡面到底有些啥？遇到這樣的問題，這個的工具可以幫助你解決上面遇到的問題。

Wireshark

老牌網路抓包利器，各種平台都可以玩耍。

軟體主頁以及下載地址Wireshark ?? Go Deep.

tcpdump

這是一個命令行工具，可以看作是Wireshark的命令行版。

系統自帶，無需額外安裝。使用幫助

Charles

網路抓包利器加上代理功能，並支持自簽名證書，所以可以用來在手機上抓取https的包。使用非常方便。付費軟體，值得購買。

軟體主頁以及下載地址Charles Web Debugging Proxy ? HTTP Monitor / HTTP Proxy / HTTPS SSL Proxy / Reverse Proxy

JD-GUI

Java的class文件反編譯神器，可以從二進位class文件查看它的Java源代碼。

軟體主頁以及下載地址Java Decompiler

JADX

JD-GUI的增強版，支持查看安卓apk/dex文件中反編譯的Java源代碼以及查看apk中其他文件的內容。

軟體主頁以及下載地址GitHub - skylot/jadx: Dex to Java decompiler

版本管理

頻繁的修改，反悔，記錄需要管理，所以版本管理是必須的。

SourceTree

Atlassians出品的圖形化版本管理工具，支持Git和Mercurial。

軟體主頁以及下載地址Free Mercurial and Git Client for Windows and Mac

文件共享

從文件伺服器(FTP, Samba etc.)下載資料或者上傳文件到伺服器上。

FileZilla

老牌Sourceforge開源文件傳輸軟體。

軟體主頁以及下載地址FileZilla download

證書管理

證書一般用於https加密，移動APP軟體的安裝文件簽名。

Portecle

圖像化管理證書的工具。

軟體主頁以及下載地址Portecle download

截屏

截屏是強需求，沒錯。MAC下有截屏快捷鍵，只能截屏。一般用戶截屏完畢後，不是馬上發出去，而是做後期處理。

snip

截屏，編輯。

軟體主頁以及下載地址Snip

資料庫

調試APP的時候，如果APP產生了數據，並且把數據保存在資料庫（sqlite）中。如果想在開發主機上查看，可以用如下的工具。

Datum

查看sqlite資料庫的內容。

軟體主頁以及下載地址Datum Apps - Home

網路請求

有時候需要自己構造一個http網路請求(GET/POST)，並查看輸入輸出的詳細內容。簡單的GET用瀏覽器可以代勞，複雜一點的需要瀏覽器安裝插件支持。用如下的工具可以到達更好的效果。

wget

命令行工具。除了查看發送網路請求，查看結果外。另外一個用途是下載文件，特別是大文件，用瀏覽器下載經常會斷線，而且斷點續傳做的不是太好。wget命令下載文件，支持斷點續傳，這個用起來不錯。

curl

功能基本同wget，系統自帶工具，無需安裝。

rest-client

支持restful風格的網路請求構造，請求和結果相應。調試restful介面的好幫手。

軟體主頁以及下載地址GitHub - wiztools/rest-client: Tool to test HTTP/RESTful webservices.

虛擬機模擬器

我的電腦是MAC，可是招商銀行的專業版沒有MAC的客戶端，腫么破？我想在MAC上看到安卓APP運行的情況，怎麼辦？安裝一個虛擬機吧！

VirtualBox

老牌虛擬機軟體，支持市面上幾乎所有流行的操作系統。

軟體主頁以及下載地址Oracle VM VirtualBox

Genymotion

安卓模擬器，運行安卓APP如同在手機上一樣的速度。

軟體主頁以及下載地址Genymotion a€「 Fast And Easy Android Emulation

MAC專用

有些工具是MAC系統專用的，比如用來管理蘋果設備(iPad, iPhone, iMac, Mac etc.)配置文件的工具。

Apple Configurator

上App Store自行搜索下載安裝。

使用幫助

服務端工具套件

有時候需要本地調試一些服務端提供的服務，或者是網站後台。這個時候一個開發／調試／模擬環境的選擇變的重要了。還是那句不忘初衷的話，好的工具讓你事半功倍！

Bitnami服務端套件

本地調試web伺服器，nginx, mysql, php-fpm, etc.

軟體主頁以及下載地址https://bitnami.com

Kitematic

Docker圖形化管理工具。 軟體主頁以及下載地址Kitematic

翻牆利器

我要上谷歌搜索最新的Android開發文檔和API，可是目前在國內用不了谷歌，怎麼辦？翻牆吧！

ShadowsocksX

看標題，不多說，默默的下載，安裝然後運行，配置，打開瀏覽器，訪問谷歌，搜索Android就可以啦！

軟體主頁以及下載地址shadowsocks-gui download

Lantern

如果上面那個不行，那麼試試這個吧，不多說了。

軟體主頁以及下載地址GitHub - getlantern/lantern: Open Internet for everyone. Lantern is a free application that delivers fast, reliable and secure access to the open Internet for users in censored regions. It uses a variety of techniques to stay unblocked, including domain fronting, p2p, and pluggable transports.

從題目中可以提煉出三點

  1. 前端
  2. 沒用過mac OS
  3. 開發工具和調試工具

看了上述的回答..我覺得題主只需要前端方面的相關的一些工具和知識.

首先我安利題主webstorm/phpstorm

兩者都是一樣 只不過phpstorm多支持了php語法.如果題主未來有打算學最好的語言(誤)可以考慮使用phpstorm

語法支持/高亮.debug.命令行.自動縮進.一鍵補充分號.全局搜索

等等等等.你值得擁有

其次是chrome

chrome-dev-tools 好用的不能再好用

mac請使用command+alt+i快速打開

再者 postMan

調試介面杠杠的

Nvm:https://github.com/creationix/nvm

用來控制nodejs版本.

當你的nodejs升級到了6.x 發現原來的模塊無法運行了.腫么辦??!!

別擔心 終端運行 nvm use 5.9.1

然後就享受nvm帶來的快捷切換吧

Http-Server:http-server

想要在區域網中建立起一個http伺服器么?不想裝nginx,apache.

那麼就使用這款吧!! 隨時隨地建立起一個小型的伺服器. 虛擬機IE調試.區域網朋友訪問 so easy！

Parallels-Desktop

想要調試(xi)IE卻不想裝雙系統換來換去? 那麼就來使用虛擬機吧. 與MAC OS 無縫連接 融合模式更祝你調試上一層

傻了吧.我能融合

SublimeText

最強大的文本編輯器.想要擼markdown?有時候偶爾打開下js,css,html文件進行修改又不想打開IDE?

  • Abode PS
  • Git
  • shadowsocks配合proxychains-ng 簡直是翻牆下載神器啊

上述的都是必備,不多說

想到再補 不定時更新

和win上一樣。。。。我在win上用vscode，偶爾sublime，調試是chrome。mac上完全不變。

相信我，Mac上Atom比Sublime text好很多，而且atom遲早會成為主流，它的插件數量，更新速度，完善能力都已經遙遙領先了，關鍵還是開源的。

該怎麼用就怎麼用咯，唯一不同就是 macOS 上 Chrome 默認的開調試工具的快捷鍵是 cmd+option+I

還有 Terminal 比命令提示符好用得多，Safari的調試工具也挺好用的

你以前用什麼，現在就用什麼！

什麼？你以前用vs2015？

我的mac工具集這兒有我自己很常用的一些軟體和工具，希望能幫助到你。

輸入法

    • 搜狗輸入法

瀏覽器

    • Chrome

Chrome插件

    • LiveReload (在開發環境中配置livereload插件，配合瀏覽器插件可以自動刷新修改內容)
    • Octotree （github和gitlab網站插件，可以顯示Code tree）
    • Momentum （可以讓新開tab頁變的很酷）
    • AngularJS batarang
    • Clear Cache
    • HTML5 Outliner
    • JSONView （格式化JSON數據）
    • Avatars for Github （github動態列表顯示頭像）
    • LastPass
    • Proxy SwitchySharp (代理切換，PS：裝了ShadowsocksX-NG後就棄用了)
    • Egret Inspector （白鷺引擎遊戲開發調試器）
    • Google翻譯 （google人工智慧翻譯，你懂的）
    • 廣告終結者
    • 二維碼（生成及識別）
    • 惠惠購物助手

辦公軟體

    • Microsoft Office

下載

    • 迅雷
    • uTorrent

音樂

    • 網易雲音樂
    • QQ音樂

Markdown

    • Mou

社交

    • QQ
    • 微信
    • Spark （由於 Yomail 老是閃退，所以換成了 Spark）

終端

    • iTerm+OhMyZsh

壓縮

    • BetterZip

編輯器

    • Sublime Text
    • VS code （感覺比 sublime text 好用）

SB編輯器插件

    • DocBlockr
    • Emmet
    • jQuery
    • jQueryDocs
    • SideBarEnhancements
    • Babel
    • ColorPicker
    • WakaTime
    • Beautify, HTML CSS Class Completion, HTML snippets, es6 snippets,jq snippets,Paste and indent,Sass,vscode-icons

VS編輯器插件

    • HTML CSS Class Completion
    • HTML snippets
    • es6 snippets
    • jQuery snippets
    • Paste and indent
    • Sass
    • vscode-icons
    • Beautify

抓包

    • Charles

切圖

    • Photoshop cc
    • Sketch
    • cutterman(ps插件，快速切圖)

ftp

    • FileZilla

虛擬機

    • Parallels Desktop

遊戲開發

    • EgretEngine
    • Egret Wing3
    • Blender (3D 建模)

效率

    • ShadowsocksX-NG (梯子)
    • iStat (在top顯示網路上傳下載速度，CPU內存使用情況等)
    • Reeder（RSS閱讀）
    • Paste（保留剪貼板數據，可以隨時調用之前的剪貼板內容）
    • Divvy（屏幕分屏）
    • Dash（程序猿文檔）
    • gas mask（快速修改 host 文件）
    • Bartender 2（top菜單欄圖片整理）
    • Go2Shell（在finder中直接喚起該目錄下的終端）
    • SourceTree (git 的 gui 工具，自從用了後，再也記不住 git 的命令了)
    • GoAgentX（牆牆牆,PS：裝了ShadowsocksX-NG後就棄用了）
    • Dr.cleaner（清理Mac）
    • PopClip
    • 截圖
    • 我的印象筆記

最後一定要安裝 homebrew!!!

編輯器：VisualStudio Code

終端：Iterm2

API：Paw 或Postman,個人覺得Paw更好用,數碼荔枝上199元，終身使用

調試：Chrome Dev Tools，用好了真的是無敵，基本上know everything about Web

微信Web開發者工具

1.iterm2 免費的終端神器, 然後安裝好zsh和oh-my-zsh開啟你的程序員之路吧，前端也可以用

2.CodeKit 是incident57開發的一套前端開發助理工具，能夠自動編譯Less, Sass等前端代碼，可以對js文件進行合併，壓縮，語法檢查工作，支持Compass (Sass)，對JPEG.PNG 格式圖片進行壓縮優化，代碼編輯過程中可自動刷新瀏覽器查看效果

3.postman 用來追蹤請求，查看返回數據，還可以看各種請求地址里的文件，前端必備

4.homebrew 用來安裝各種插件和軟體包

5.dash 各種api文檔，配合alfred查找效果更佳哦

6.vscode編輯器配合插件，前端寫代碼必備，插件基本上滿足日常需求，還能配合zsh和iterm2使用，雖然是微軟開發的，感覺比windows上好用，，當然也會有人推薦sublime和coda2

7.ps插件-cutterman 一鍵切圖簡單高效

8.snap 方便截圖，然後保留在一個區域，隨時取用

9.hype3快速設計html5特效

10.CheatSheet 快速查各軟體快捷鍵，提高效率

11.Cornerstone mac上比較好的svn軟體

12.WeFlow 是一個 GUI 的前端工具，其功能和用法可以參考市面上比較出名的一款軟體：CodeKit

13.sip 顏色拾取，方便快捷，還可以存儲歷史值和配色

14.pixelmator 比ps小但功能滿足需求的軟體，偏設計的前端可以使用

-----------------------------------我是分割線，不算是Mac專屬的插件-----------------------------------

1.node插件anywhere簡單安裝簡單操作，搭建簡單伺服器，僅需兩步 npm install anywhere -g;

在項目目錄下 anywhere 8080

2.vscode插件，live html邊改邊看頁面效果，chrome也有類似插件live

3.chrome插件,browserstack,在雲端測試各種瀏覽器，比如ie

---------------------------------------------------------------------------------------------------------------

等等還有許多小軟體和chrome插件配合開發使用，美哉

vscode很好用啊，以前在win上用vscode，換到mac後，繼續用vscode，感覺挺好的。

所以你以前是怎麼開發的?

postman 調試介面

phpstorm 或者 webstorm

iterm 命令行工具

dash api手冊大全

chrome 瀏覽器

日常經常用的也就用這麼多

以前用什麼就用什麼開發啊。另外熟練使用命令行，裝個iTerm2，再裝好node git等需要的就行了吧。

通用工具：xcode，sublime，github formac，ps，mou，nodejs

安卓開發：ADT或者Android studio

web開發：webstorm

chrome

推薦閱讀：

※哪裡有比較成熟的 React.js 項目案例？
※960px 寬度的網格布局過時了嗎？
※想掌握前端的構建工具，有沒有學習路線推薦？
※如何看待只用CSS畫圖？
※為什麼很多前端工程師都用蘋果筆記本?

TAG:Mac | Web開發 | 前端開發 | 前端工程師 |