搜尋

熱門關鍵字:

最新文章

  1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. [教學] 如何在Chrome瀏覽器的開發人員工具的Console，動態載入所需的Javascirpt元件

[教學] 如何在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元件


chrome網頁除錯, chrome載入js, console載入js, 網頁開發工具,