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

jquery.png

让你的浏览器 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 节点即可.

JQUERY_CONSOLE.png

输入上面的代码以后,你就可以像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=​"输入单词或者中文">​]

jquery_select.png

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

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

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



回到顶部