第二天:工具安裝 &使用(I)---NotePad++&Chrome
前提概要
天下武功讓你知,唯有君子把手練三十天的內容,請大家手把手跟著練,一定能收穫非凡。
俗話說:工欲善其事,必先利其器本文的主要導向為"實作導向",還請各位讀者實際操過,加深印象。
正文開始
第二天內容如下:- Notepad++的安裝與使用
- Chrome瀏覽器的JavaScript調試
1. Notepad++的安裝與使用
Notepad++是一款超好用的輕量級編輯器,能夠透過許多外掛讓它變得很強大。下圖為黑修斯利用Notepad++撰寫鐵人賽DAY2的圖片,讓大家稍微了解Notepad++的威力,因此Notepad++也是黑修斯使用頻率最高的編輯器之一。
請大家到官網下載後,並依照下列步驟安裝。
可以指定自己喜歡的路徑安裝,也可使用免安裝版的,放置在隨身碟帶著走。
重要設定,黑修斯建議如下圖設定,能夠避免日後安裝外掛產生的路徑問題。
軟體介面語言設定:如果安裝沒有出現繁體中文,請重新安裝,或是依照下圖設定更改。
軟體介面更換"繁體中文"完成。
1-1 plugin manager 外掛安裝
透過GitHub下載外掛模組,在NotePad++中 設定->匯入->匯入外掛模組,選擇plugin manager.dll檔案,完成匯入,如下圖所示。註:記得將updater 資料夾中的gpup.exe貼到notepad++目錄下的updater。
到 外掛 >plugin manager > show plugin manager
在這一頁可以找到需要安裝的套件,也可以觀看已經安裝過的套件,這邊範例是找到Markdown Viewer++安裝並操作練習。
到 外掛 > Markdown Viewer++ 將第一個打勾,或是在旁邊"M+"小圖示點擊,就能夠即時預覽markdown語法。
最終的樣式如下圖
2. Chrome瀏覽器的JavaScript調試
黑修斯在短期進修實作時,其中做的一個項目,透過強大的Chrome瀏覽器功能調試與頁面調整。要如何進入調試模式呢?直接按下鍵盤F12,或是如下圖操作
已經順路進入調試功能中(開發人員模式)
調試功能中(開發人員模式),有兩個重要的地方,如下圖標示:
2-1 透過console調試
我們可以在console中即時調試我們的頁面,如下圖所示,頁面的id為Tab1,在console中輸入Tab1,會出現關於 id=Tab4 元素的相關訊息。小結
關於Chrome的調試,在後面的篇幅中會大量使用。本系列文章實作為導向,還請各位讀者多加練習。
IT邦版本連結
全文是黑修斯參加IT邦鐵人賽所撰寫之文章,於IT邦鐵人賽完賽後,將所有文章重新發布在自本人部落格上。
轉貼本文時,需註明來自黑修斯隨手札記原創作者 hughes chen(黑修斯),及附上原文連結,同時 禁止修改,禁止商業使用
0 留言
不一定能即時回覆問題,有時間會盡量答覆。