chrome 浏览器 console 加入 jquery 测试调试

文章目录

文章目录

让你的浏览器 console 加入 query 方便测试调试.

这样我们去操作 dom 就像 javascript 文件中书写代码一样方便.
而且查找结果实时输出到 console 中
你可以很轻松的发现 jquery 选择器是不是有误
操作的结果是不是你想要的

如何实现

你需要在你的 console 中引入一段 jquery

var jquery = document.createElement(‘script’);  
jquery.src = “http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”;
document.getElementsByTagName(‘head’)[0].appendChild(jquery);  
jQuery.noConflict();

这个节点就是我们动态生成的 script 节点.
然后把 google cdn上的jquery 地址赋给 jquery 节点.
在 head 节点下插入jquery 节点即可.

输入上面的代码以后,你就可以像javascript 一样,用jquery 选择器很方便的操作 dom ,如下:

我像搜索一下 博客 里面的 input 输入框, console 中输入如下:

$("input");

得到的结果如下:

[<input type=​"text" class=​"uk-search-field" name=​"k" placeholder=​"全站搜索" style=​"height:​35px;​">​, 
<input type=​"text" class=​"iciba-extension-keyword J_IcibaKeyword" placeholder=​"输入单词或者中文">​]

上面选择器成功查找到2各 dom 节点

1. 全站搜索框 input
2. chremo 有道翻译插件动态插入的 input

出自:chrome 浏览器 console 加入 jquery 测试调试