三十天全端學習(Javascript、Python、MongoDB)---第二天:工具安裝 &使用(I)---NotePad++&Chrome


第二天:工具安裝 &使用(I)---NotePad++&Chrome


前提概要

天下武功讓你知,唯有君子把手練
三十天的內容,請大家手把手跟著練,一定能收穫非凡。
俗話說:工欲善其事,必先利其器
本文的主要導向為"實作導向",還請各位讀者實際操過,加深印象。




正文開始

第二天內容如下:
  1. Notepad++的安裝與使用
  2. Chrome瀏覽器的JavaScript調試

1. Notepad++的安裝與使用

Notepad++是一款超好用的輕量級編輯器,能夠透過許多外掛讓它變得很強大。
下圖為黑修斯利用Notepad++撰寫鐵人賽DAY2的圖片,讓大家稍微了解Notepad++的威力,因此Notepad++也是黑修斯使用頻率最高的編輯器之一。
20102269XRgAJDB8al
請大家到官網下載後,並依照下列步驟安裝。
20102269zFaIos9YDX
20102269NIcX9FG1uN
可以指定自己喜歡的路徑安裝,也可使用免安裝版的,放置在隨身碟帶著走。
20102269nTOkwTS6rM
重要設定,黑修斯建議如下圖設定,能夠避免日後安裝外掛產生的路徑問題。
201022694q1lBMpF3f
軟體介面語言設定:如果安裝沒有出現繁體中文,請重新安裝,或是依照下圖設定更改。
20102269G4XpeZscLO
20102269CQopQtjg9t
軟體介面更換"繁體中文"完成。
20102269pGPJQCPTzb

1-1 plugin manager 外掛安裝

透過GitHub下載外掛模組,在NotePad++中 設定->匯入->匯入外掛模組,選擇plugin manager.dll檔案,完成匯入,如下圖所示。
20102269eEaRxIn4NZ
20102269PPvhwW8PI4
201022699Xd0LoI1KG
20102269EgEbvfL8ZU
註:記得將updater 資料夾中的gpup.exe貼到notepad++目錄下的updater。

到 外掛 >plugin manager > show plugin manager
201022691DenuP4Q25
在這一頁可以找到需要安裝的套件,也可以觀看已經安裝過的套件,這邊範例是找到Markdown Viewer++安裝並操作練習。
20102269GO43MBo2aR
到 外掛 > Markdown Viewer++ 將第一個打勾,或是在旁邊"M+"小圖示點擊,就能夠即時預覽markdown語法。
20102269yK6ZK2nfjm
最終的樣式如下圖
201022693S9zvJVnQu

2. Chrome瀏覽器的JavaScript調試

黑修斯在短期進修實作時,其中做的一個項目,透過強大的Chrome瀏覽器功能調試與頁面調整。
201022698JKtqNdSmV
要如何進入調試模式呢?直接按下鍵盤F12,或是如下圖操作
201022697ZJRhE414R
已經順路進入調試功能中(開發人員模式)
20102269rPmliDlktQ

調試功能中(開發人員模式),有兩個重要的地方,如下圖標示:
  1. 快速選擇元素:可以讓我們使用滑鼠在視窗化界面快速選到相關程式碼。
  2. 手機模式:可以讓我們使用手機的視窗開發與調整。
    20102269FiMtNO7yBE
    1. 快速選擇元素:可以讓我們使用滑鼠在視窗化界面快速選到相關程式碼。
      在"灰色號球1"點擊後:快速選擇元素會變成藍色,這時候可以去選取頁面,如"灰色號球2",並觀察"灰色號球3"的反應。
      20102269MZKmCNalVL
    2. 手機模式:可以讓我們使用手機的視窗開發與調整。
      "灰色號球1"點擊:可以切換到手機手模式。"灰色號球2"點擊 :可以選擇手機型號或自訂頁面。
      201022692N95vGQ9WN

2-1 透過console調試

我們可以在console中即時調試我們的頁面,如下圖所示,頁面的id為Tab1,在console中輸入Tab1,會出現關於 id=Tab4 元素的相關訊息。
20102269fomqQIXbpG

小結

關於Chrome的調試,在後面的篇幅中會大量使用。
本系列文章實作為導向,還請各位讀者多加練習。



IT邦版本連結
全文是黑修斯參加IT邦鐵人賽所撰寫之文章,於IT邦鐵人賽完賽後,將所有文章重新發布在自本人部落格上。
轉貼本文時,需註明來自黑修斯隨手札記原創作者 hughes chen(黑修斯),及附上原文連結,同時 禁止修改,禁止商業使用

張貼留言

0 留言