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 节点
- 全站搜索框 input
- chremo 有道翻译插件动态插入的 input