瀏覽器 網頁開發 網頁設計

[教學] 如何在Chrome瀏覽器的開發人員工具的Console,動態載入所需的Javascirpt元件

2019/11/05

梅問題-[教學] 如何在Chrome瀏覽器的開發人員工具的Console,動態載入所需的Javascirpt元件
  對於許多網頁設計的朋友們,應該相當習慣使用Google Chrome瀏覽器中的開發人員工具,來修改網頁的CSS樣式,且還即見即所得,除了修改CSS樣式以外,甚至還可編輯HTML碼,對於網頁版面設計是個不可或缺的好工具,但若今天要測javascript時,就得先將網頁另存下來,再作套用。

  其實不用這麼麻煩,現在有個更方便的方法,可動態載入所需的javascript元件到網頁中,並直接進行測試,至於要怎在開發人員工具動態載入javascript元件,現在就一塊來看看吧!


Step1
梅干簡單的設計一下小範例,當今天表單未作驗證時,按下送出,就會直接跳到Google表單,並顯示有欄位未填的資訊。
梅問題-[教學] 如何在Chrome瀏覽器的開發人員工具的Console,動態載入所需的Javascirpt元件
Step2
接著開啟「開發人員」工具,並切到「Console」頁籤。 
梅問題-[教學] 如何在Chrome瀏覽器的開發人員工具的Console,動態載入所需的Javascirpt元件
Step3
再輸入要載入表單驗證的js,當載入完成時,下方則會出現已載入的script路徑。
var jqcheck = document.createElement('script');
jqcheck.src = "https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.js";//要載入的js元件位置
document.getElementsByTagName('head')[0].appendChild(jqcheck);//放到網頁的head頁籤中
梅問題-[教學] 如何在Chrome瀏覽器的開發人員工具的Console,動態載入所需的Javascirpt元件
Step4
當載入完成後,將頁籤切到「Elements」時,在<head>的地方,就會看到剛所載入的js元件。
梅問題-[教學] 如何在Chrome瀏覽器的開發人員工具的Console,動態載入所需的Javascirpt元件
Step5
接著再輸入該元件的簡易啟用碼。
梅問題-[教學] 如何在Chrome瀏覽器的開發人員工具的Console,動態載入所需的Javascirpt元件
Step6
都弄好後,再回剛的表單試試看,當直接按下送出時,右邊則會跳出必填資訊,因此透過Console,也可很方便的測試js元件喔!
梅問題-[教學] 如何在Chrome瀏覽器的開發人員工具的Console,動態載入所需的Javascirpt元件