Chrome Dev Tool 中文教程 Chrome dev tool 高质量视频教程EN

使用方法:

  1. js 文件里 写 console.log( 语句……)
    1. 保存
    2. 刷新网页!
    3. console 控制台 就会有显示了.

console 是 一个强大的API.

alert → console → 浏览器js调试控制台.

以前只能用 alert 弹框. 调试完后 还要清理代码…… 现在都用 console.

用 chrome . 打开 开发者面板. 选择 sources 把文件夹拖进来! 然后选择 你要调试的js文件就可以了.

JS 断点调试 断点: 让程序中断在需要的地方,方便分析 设置断点,下次程序自动运行到断点位置 会自动停止.

看 console 输出结果 大概能判断代码能正常运行.

断点设置: 找到响应的js文件. → 行号左边空白处右键 设置. sources 断点:

右边介绍: pause/resume 暂停/恢复脚本执行. step over: 跳到下一行. step in: 进入当前函数. step out: 跳出当前函数. deactive/active all breakpoints 关闭/开启 所有断点 (不会取消.) pause on exceptions 异常情况 自动断点设置.

js 压缩工具: compile 编译!!

https://developers.google.com/closure/compiler/docs/gettingstarted_app

谷歌出的 . 把js 里多余的空格 什么的 精简….

还能把 几个js文件 和成一个

也有网页 视图界面. 粘贴文件网址就可以了.

==== 测试方法

最简单的 输入:

alert("hello") 按回车 → 就会出现一个 弹框.

1+2 回车 → 3

document.getElementsByClassName("container") 就能查找 类名是 container 的元素…

chrome 开发者工具: 进阶级别的 前端开发者….

• console.log:普通信息 • console.info:提示类信息 • console.error:错误信息 • console.warn:警示信息

这里先不管 js 文件. 单纯的看 console 控制台.

输入:
console.log(“这是普通信息.”); console.info(“这时 提示类别信息. 蓝色圆圈标志”); console.error(“这是 错误信息 : 红色圆圈 xx 标志”); console.warn(“这是 黄色 三角形 警示信息.”);

console.log 第一个参数: 可以包含 一些格式化的指令 比如: %c 第二个参数: 纯css 来控制的.

比如给 hello world 弄件红色大衣服 再出来见人: console.log("%cHello World","font-size:25px; color:red;");

再华丽点: 把文字 彩色 渐变: console.log('%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

再厉害点: 来张动图: console.log("%c", "padding:50px 300px;line-height:120px;background:url('http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif') no-repeat;");

console.table 直接以表格形式 输出数据:

var data = {‘品名’: ‘杜雷斯’, ‘数量’: 4}, {‘品名’: ‘冈本’, ‘数量’: 3}; console.table(data);

console.assert 红色 圆 ✗ 对传入的表达式进行判断. 值为假的时候 才输出响应信息到控制台.

当代码 满足某项条件才输出信息到控制台. 而不必写 if 函数 …..

var isDebug=false; console.assert(isDebug,'开发中的log信息。。。');

console.count 计数. 统计某段代码执行了多少次. 可以直接显示.

function foo(){ //其他函数逻辑blah blah。。。 console.count('foo 被执行的次数:'); } foo(); foo(); foo(); ``

console.dir  将 DOM 节点以js对象的形式输出到控制台. console.log 是直接将改dom 节点以dom树的结构进行输出. 与在元素审查时看到的结构是一致的。不同的展现形式. 两个 差不多的功能. 无序介意 随便选一个.

console.time & console.timeEnd 性能测试: 某断代码执行的 耗时情况.

console.time("Array initialize"); var array= new Array(1000000); for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object(); }; console.timeEnd("Array initialize"); ``

console.profile & console.timeLine  

console.trace 调试 堆栈相关…

这些 都是 在 window.console 这个对象下面的方法. 通称: Console API. 也叫命令. 是chrome 内置的.

$_  最近一次表达式的执行结构. 功能和 上下键+回车一样. 但是 用美刀可以 作为一个变量 在下面的表达式使用.

原生支持 jquery . 可以用 $加上css 选着器来选择 DOM 节点…. $('body') 这个要写在 控制台里面 而不是js 文件里面. $(selector) 满足选择条件的 首个 dom 元素 其实$(selector)是原生JavaScript document.querySelector() 的封装

copy  复制控制台里获取到的内容 copy(document.body) 然后到处粘贴…..

debug & undebug

debug同样也是接收一个函数名作为参数。当该函数执行时自动断下来以供调试,类似于在该函数的入口处打了个断点,可以通过debugger来做到,同时也可以通过在Chrome开发者工具里找到相应源码然后手动打断点。
而undebug 则是解除该断点。 而其他还有好些命令则让人没有说的欲望,因为好些都可以通过Chrome开发者工具的UI界面来操作并且比用在控制台输入要方便。

\@: chrome dev tool

workspaces

Workspaces是Chrome DevTools的一个强大功能, 这使DevTools变成了一个真正的IDE。 Workspaces会将Sources选项卡中的文件和本地项目中的文件进行匹配, 所以你可以直接编辑和保存,而不必复制/粘贴外部改变的文件到编辑器。

为了配置Workspaces,只需打开Sources选项,然后右击左边面板的任何一个地方,选择Add Folder To Worskpace,或者只是把你的整个工程文件夹拖放入Developer Tool。现在,无论在哪一个文件夹,被选中的文件夹,包括其子目录和所有文件都可以被编辑。为了让Workspaces更高效,你可以将页面中用到的文件映射到相应的文件夹,允许在线编辑和简单的保存。

console 下的 preserver log 这个很重要.

很多时候 莫名的 会跳转. 导致看不见 报错信息. 这个打勾了 有错误就会显示. 不会清楚.

开发者工具 右上角 也是有设置的的.

preference → elements→ show user agent shadow DOM. 应该就可以看到隐藏元素了… Web浏览器在构建如文本框、按钮和输入框一类元素时,其它基本元素的视图是隐藏的。不过,你可以在Settings -> General 中切换成Show user agent shadow DOM,这样就会在元素标签页中显示被隐藏的代码。甚至还能单独设计他们的样式,这给你了很大的控制权。


console.log 只显示一个元素 不显示 所有的数组.

console.log(window);

這時候會顯示出詳細的物件內容 Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

但是我想log出多個物件 許多人會使用 console.log(‘window’ + window , ‘body’ + document.body); 但是會顯示出 window[object Window] body[object HTMLBodyElement] 並不會出現物件詳細內容 這時候只需要”+”改成”,” console.log(“window” , window , ‘body’ , document.body); 就會顯示出詳細內容。

利用 getEventListeners() 取得物件被綁定的事件, 利用 monitorEvents() 監聽物件觸發的事件

6. 利用 console.table 讓顯示物件更清楚

var array = [{a:1, b:2, c:3}, {a:1, b:"aaa", c:"bbbb"}, {a:1, b:222, c:3333}, {a:1, b:132, c:213}, {a:1, b:{bb:2}, c:3}];

console.table(array);

8. console.trace() 來檢查函數的軌跡

Ex :  function action(){ console.trace() var test = “test” }

function action3() { action2() } function action2() { action1() } function action1() { action() }

action3();

9. 利用console.count 計算函式執行次數

Ex: function foo(){     console.count(‘name’); }

foo() 輸出 name: 1foo() 輸出 name: 2 foo() 輸出 name: 3 foo() 輸出 name: 4 foo() 輸出 name: 5

利用 console.profile() 查看效能

利用 dir 來看Dom元素所有屬性方法

$(‘#test’) 在console 裡只會輸出HTML CODE,像是這樣<input type=”text” id=”test”>….</input>

利用 dir($(‘#test’)) 將會輸出 test 的屬性及方法