Chrome 开发调试按Right Arrow(向右箭头)键展开折叠的节点。再次按下可移动到（现在展开的）节点的第一个

Chrome Developers

1.浏览器中的快捷键

2.开发面板中快捷键

Styles快捷方式	windows	Mac
切换颜色值表示法	Shift + 点击颜色选择器小方块	Shift + 点击颜色选择器小方块
递增 / 递减值	Up,PgUp,Down,pgDown	Up,PgUp,Down,pgDown
递增 / 递减值为10	Shift+ (Up,PgUp,Down,pgDown)	shift+(Up,PgUp,Down,pgDown)
递增 / 递减值为0.1	Alt+ (Up,PgUp,Down,pgDown)	Alt+(Up,PgUp,Down,pgDown)
递增 / 递减值为100	Ctrl+ (Up,Down)	Ctrl+(Up,Down)
编辑属性,属性值	单击 (tab切换到next) (tab+shift切换到pre)	...

按Right Arrow(向右箭头)键展开折叠的节点。再次按下可移动到（现在展开的）节点的第一个子节点。您可以使用这个技巧快速浏览深层嵌套的节点。
在你的 console 里输入下面的命令：document.designMode = "on" 可以直接修改网页上的内容了。
移动dom 直接鼠标拖住移动释放就可以
dom 断点调试：子树修改属性修改元素移除
Event Listeners:勾选Ancestors 可以查看祖先有的这个事件的
Framework listeners：DevTools自动解析框架或库封装事件的代码
==style中 "Inherited from ..." 为分界上面是自己的样式，下面是继承祖先的样式==
显示用户代理Shadow DOM当你处理按钮和输入等事情时，Web浏览器通常会构造隐藏的属性：setting->ELements->Show user agent shadow DOM 可以产看到一下属性例如：

    ::-webkit-input-placeholder {
           color: red;
       }

$() 返回与指定的CSS选择器匹配的第一个元素。 document.querySelector()的快捷方式。
引入其他插件有$会覆盖自带的
$0 - 4访问最近选择的元素和对象。
$_返回最近一次计算的表达式的值。
copy(object)将对象元素复制到剪切板，可以用于转换请求后数据的格式json：copy(result) 然后在编辑器之类的直接粘贴就格式化成功了。
getEventListeners(object)返回在指定对象上注册事件的所有监听器，是一个对象
debuge(fName) ：调用时候就会自动断点到这个函数中 undebug(function)
monitor(function) ：当调用某个 function 时，Console 会输出这个 function 的名字和参数 unmonitor(function)
inspect(object/function) 可以跳到相应的方法或者是element
F8释放断点，F10大步走，F11最小步走，SHIFT+F11跳出

添加黑盒测试Blackbox Script 黑盒文件调试法，将此文件设置为黑盒，这样在调试时将不会进入这个文件
两种添加方式：1. 直接右击选择
2. setting中Blackboxing设置
添加条件断点
Call Stack :断点处的债堆栈，就是从该函数起，逐级追寻调用到他的函数名
==截图==在Elements标签中，选择一个元素，按下cmd-shift-p（windows则为ctrl-shift-p）组合键，搜索并选择Capture node screenshot进行保存操作
==转换base64== Network下转中图片然后 Copy iamge as data URI