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

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

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

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

Step1
小媛啾简单的设计一下小范例,当今天表单未作验证时,按下送出,就会直接跳到Google表单,并显示有栏位未填的资讯。

Step2
接着开启「开发人员」工具,并切到「 Console」页签。 

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页签中
Step4
当载入完成后,将页签切到「 Elements」时,在 <head>的地方,就会看到刚所载入的js元件。
Step5
接着再输入该元件的简易启用码。
Step6
都弄好后,再回刚的表单试试看,当直接按下送出时,右边则会跳出必填资讯,因此透过 Console,也可很方便的测试js元件喔!

文章链接:https://www.xiaoyuanjiu.com/13077.html
文章标题:[教程] 如何在Chrome浏览器的开发人员工具的Console,动态载入所需的Javascirpt元件
文章版权:小媛啾 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!

为TA充电
共{{data.count}}人
人已赞赏
技术教程

免装插件,叫出Chrome内置更换外框颜色的功能,让你的视觉换换心情

2019-10-31 10:24:04

技术教程

Rofocus番茄钟工作法+ 背景音乐播放,提升工作效率的Chrome扩展插件

2019-11-8 10:03:04

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索