1. 小媛啾首页
  2. 技术教程

[教程] 如何在Chrome浏览器的开发人员工具的Console,动态载入所需的Javascirpt元件

对于许多网页设计的朋友们,应该相当习惯使用Google Chrome浏览器中的开发人员工具,来修改网页的CSS样式,且还即见即所得,除了修改CSS样式以外,甚至还可编辑HTML码,对于网页版面设计是个不可或缺的好工具,但若今天要测javascript时,就得先将网页另存下来,再作套用。

其实不用这么麻烦,现在有个更方便的方法,可动态载入所需的javascript元件到网页中,并直接进行测试,至于要怎在开发人员工具动态载入javascript元件,现在就一块来看看吧!

如何在Chrome浏览器的开发人员工具的Console,动态载入所需的Javascirpt元件

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元件

发布者:yuanyuan,转转请注明出处:https://www.xiaoyuanjiu.com/13077.html