有时候在浏览网页或调试页面时，想快速用 jQuery 查询元素、修改 DOM、批量处理页面内容，但当前页面本身并没有引入 jQuery。
如果只是临时调试，不想改页面源码，也不想写完整的原生 JavaScript，就可以在 Chrome DevTools 控制台中动态插入 jQuery。这样当前页面就可以临时使用 jQuery 和 $。
需要注意，这种方法只适合开发调试、临时分析页面结构、处理自己能确认安全的网页。不要在不可信网站上随便粘贴别人给的控制台代码，因为控制台代码可以读取页面信息、操作页面内容，甚至执行危险行为。
一、打开 Chrome 控制台 #
在 Chrome 浏览器中打开需要调试的页面，然后按：
F12或者：
Ctrl + Shift + I也可以在页面空白处右键，选择：
检查然后切换到：
Console也就是“控制台”标签页。
如果 Chrome 提示不能直接粘贴代码，需要在控制台中按提示输入：
allow pasting然后再粘贴代码。这个提示是 Chrome 为了防止用户随便复制陌生代码导致账号或页面数据被攻击。
二、在控制台中插入 jQuery #
可以在控制台中执行下面这段代码：
var importJs = document.createElement('script');
importJs.setAttribute('type', 'text/javascript');
importJs.setAttribute('src', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js');
document.getElementsByTagName('head')[0].appendChild(importJs);执行后稍等一两秒，jQuery 文件加载完成后，就可以在当前页面中使用：
jQuery或者：
$例如：
$('a').length这行代码可以统计当前页面中有多少个链接。
再比如：
$('img').length可以查看当前页面中有多少张图片。
三、推荐使用带加载提示的写法 #
上面的写法比较简单，但它没有提示 jQuery 是否加载完成。如果页面网络慢，或者 CDN 访问失败，直接使用 $ 可能会提示未定义。
更稳妥的写法是加入 onload 回调：
(function () {
var script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js';
script.onload = function () {
console.log('jQuery loaded:', jQuery.fn.jquery);
};
script.onerror = function () {
console.error('jQuery failed to load.');
};
document.head.appendChild(script);
})();如果加载成功，控制台会输出类似：
jQuery loaded: 3.7.1这时再使用 $() 或 jQuery() 就比较稳妥。
四、如果页面已经有 jQuery #
有些网页本身已经引入了 jQuery，这时不需要重复加载。可以先在控制台中输入：
typeof jQuery如果返回：
"function"说明页面已经有 jQuery。
也可以查看版本：
jQuery.fn.jquery如果页面已经存在 jQuery，直接使用即可。
如果返回：
"undefined"说明当前页面没有 jQuery，或者 jQuery 没有暴露到全局变量中。
五、避免覆盖页面原有的 $ #
有些页面虽然没有 jQuery，但可能已经使用了其他库占用了 $ 变量。为了避免影响页面本身逻辑，可以使用 jQuery.noConflict()。
例如：
(function () {
var script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js';
script.onload = function () {
window.jq = jQuery.noConflict(true);
console.log('jQuery loaded as jq:', jq.fn.jquery);
};
document.head.appendChild(script);
})();这样加载后，不直接使用 $，而是使用：
jq('a').length这种方式更适合调试复杂页面，避免和原页面已有脚本冲突。
六、常见使用示例 #
统计页面中所有链接数量：
$('a').length输出所有链接地址：
$('a').each(function () {
console.log($(this).attr('href'));
});查找所有图片地址：
$('img').each(function () {
console.log($(this).attr('src'));
});隐藏页面中某些元素：
$('.ad, .popup, .banner').hide();修改某个元素的文字：
$('h1').text('测试标题');给所有链接加边框，方便观察页面结构：
$('a').css('outline', '1px solid red');这些操作都只是在当前页面临时生效。刷新页面后，修改就会消失。
七、为什么有时候加载失败 #
有些页面执行这段代码后，jQuery 可能无法成功加载，常见原因包括：
第一，页面设置了内容安全策略。 如果页面的 CSP 限制了外部脚本来源，浏览器可能会拒绝加载 jsDelivr 或其他 CDN 上的脚本。
第二，当前网络无法访问 CDN。 如果所在网络访问 jsDelivr 不稳定，可以换成其他 jQuery CDN 地址。
第三，页面本身是特殊页面。 例如 Chrome 的内部页面、扩展页面、浏览器设置页面，可能不允许这样注入脚本。
第四，页面已经占用了 $。
这时可以使用 jQuery，或者用 noConflict() 改成 jq。
第五，加载还没完成就直接使用。
脚本插入页面后需要一点加载时间，建议使用带 onload 的版本。
八、换用 jQuery 官方 CDN #
除了 jsDelivr，也可以使用 jQuery 官方 CDN。
例如：
(function () {
var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.7.1.min.js';
script.onload = function () {
console.log('jQuery loaded:', jQuery.fn.jquery);
};
document.head.appendChild(script);
})();如果一个 CDN 加载失败，可以临时换另一个 CDN 尝试。
九、正式开发中不建议这样做 #
在控制台中插入 jQuery，适合临时调试，不适合正式项目。
正式项目中应该通过正常方式管理依赖，例如：
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>或者通过 npm 安装：
npm install jquery然后在项目中按模块方式引入。
控制台注入脚本的特点是方便，但它不稳定、不持久，也不适合多人协作和生产环境。
十、安全提醒 #
不要在网页控制台中执行来源不明的代码。
很多网络骗局会诱导用户打开控制台，然后复制一段所谓“解锁功能”“领取奖励”“恢复账号”“查看隐藏内容”的代码。这类代码可能会读取页面信息、操作账号、发送请求，甚至造成数据泄露。
所以，控制台代码只应该执行自己理解含义的内容。如果不确定一段代码做了什么，就不要粘贴执行。
总结 #
在 Chrome 控制台中临时添加 jQuery，可以使用下面这段代码：
(function () {
var script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js';
script.onload = function () {
console.log('jQuery loaded:', jQuery.fn.jquery);
};
script.onerror = function () {
console.error('jQuery failed to load.');
};
document.head.appendChild(script);
})();加载成功后，就可以在当前页面中使用：
$('a').length或者：
jQuery('img').length这个方法适合临时调试、分析页面结构、快速批量操作 DOM。刷新页面后，注入的 jQuery 和临时修改都会消失。
如果是正式项目，还是应该通过正常的依赖管理或页面脚本引入 jQuery，而不是依赖控制台临时注入。