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

梅干 2019/11/05 1 分鐘閱讀

　　對於許多網頁設計的朋友們，應該相當習慣使用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/[email protected]/dist/jquery.validate.js";//要載入的js元件位置
document.getElementsByTagName('head')[0].appendChild(jqcheck);//放到網頁的head頁籤中