谷歌浏览器chrome开发者工具中使用jquery

最新推荐文章于 2025-07-07 14:07:05 发布

原创最新推荐文章于 2025-07-07 14:07:05 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#chrome #前端

前端专栏收录该内容

37 篇文章

订阅专栏

本文介绍了开发者如何在未引入jQuery的页面上，通过Chrome开发者工具的Console控制台，动态添加jQuery库以便进行调试，包括创建script元素并设置其src属性的方法。

作为开发者都知道调试前端页面时候，会用到chrome浏览器的开发者工具。快捷键是ctrl + shift + I。如下图：

然后打开console控制台，就是切换上图中的标签页“Console”, 在调试前端页面的时候，常会用到jquery，如果该页面引入的jquery.js，可以在控制台中直接使用。

如果当前页面没有引入jquery.js, 输入 $(), 会提示undefined

针对这种情况，可以在控制台中动态的添加js，代码如下

var importJs=document.createElement('script');importJs.setAttribute("type","text/javascript");
importJs.setAttribute("src", "https://cdn.bootcdn.net/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js");
document.getElementsByTagName("head")[0].appendChild(importJs);

这样就可以使用jquery来调试了。