Tips and Tricks(小技巧)
console(控制臺)
運行多行的命令
Shift + Enter 允許您在控制臺輸入多行。
Snippets了解更多關于多行代碼持久使用的方法。這個功能可以執行自定義的javascript片段，并將其存儲在DevTools中。
啟動元素審查的快捷方式
Ctrl + Shift + C 或 Cmd + Shift + C 將快速啟動 DevTools 檢查元素的模式。
支持 console.table 命令
使用如下：
console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
console.table([[1,2,3], [2,3,4]]);
還有一個可選的 columns 參數來選擇需要輸出的列。
如下：
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
var family = {};
family.mother = new Person("Susan", "Doyle", 32);
family.father = new Person("John", "Doyle", 33);
family.daughter = new Person("Lily", "Doyle", 5);
family.son = new Person("Mike", "Doyle", 8);
console.table(family, ["firstName", "lastName", "age"]);
如果只想輸出出前兩列，可以：
console.table(family, ["firstName", "lastName"]);
預覽在控制臺打印出的對象
可以直接使用console.log()預覽打印出的對象，不需要做額外的工作。
傳遞多個參數控制打印日志的樣式
你可以通過 %c 將樣式添加到您的控制臺日志,就像你可以在Firebug中做的一樣。如：
console.log('%cBlue! %cRed!', 'color: blue;', 'color: red;');
More: Styled Console Logging In The DevTools | G+
清空控制臺歷史的快捷鍵
Ctrl + L and Cmd + L 快捷鍵. 在 shell 中 clear() 命令也可以。 javascript中的console.clear()也是可以的。
做一個鍵盤俠
Devtools 打開并獲得焦點時時，Shift + ? 命令打開一個設置面板，選擇 shortcuts 可以看到所有可用的快捷鍵
從控制臺快速的選擇元素
Select an element and type $0 in the console, it will be used by the script. If you have jQuery on the page, you can then use $($0) to reselect the element in the page.
You can also right click on any element output to the console and click 'Reveal in Elements Panel' to find it in the DOM.
用XPath表達式選擇DOM
XPath is a query language for selecting nodes from documents and generally returns a node-set, string, boolean or number. You can use XPath expressions to query the DOM from the DevTools JavaScript console.
The $x(xpath) command will allow you to execute a query - see below for an example of how to search for the images in a page using $x('//img'):
However, the function also accepts an optional second argument for the path context - i.e $x(xpath, context). This lets us select a specific context (e.g an iframe) and run an XPath query against it.
var frame = document.getElementsByTagName('iframe')[0].contentWindow.document.body;
$x('//'img, frame);
which queries the images within the specified iframe.
得到控制臺最后一個輸出的結果
使用 $_ 得到控制臺最后一個輸出的結果.
console.dir()
console.dir(object) 提供的命令可以列出一個JavaScript對象所有屬性。
在指定的 iframe 中運行控制臺中命令
Along the bottom bar of the DevTools are drop-down options that change depending on the context of your current tab. When you’re in the Console panel, there’s a drop-down that allows you to select the frame context that the console will operate in. Select your frame in the drop-down and you’ll find yourself in the right context in no time.
當瀏覽器切換到另一個頁面時保存控制臺中歷史
在控制臺版面右鍵，選擇 save 即可
console.time() 和 console.timeEnd()
可以 console.time() 和 console.timeEnd() 計算程序運行的時間.如下：
console.profile() 和 console.profileEnd()
DevTools打開時,調用 console.profile() JavaScript CPU的分析。console.profileEnd() 結束此次分析。如下：
每次分析都被加到 Profiles面板和 `console.profilses'中:
** 更多使用控制臺的技巧見using the console**:
Elements
打開尺標線
打開 Devtools Settings > General > Show rulers即可
css 屬性的自動補全
顏色選擇器
在Devtools中點擊顏色時可以調出一個顏色選擇器。用 shift + 'click' 可以改變顏色的樣式。
新增CSS 樣式
在Elements面板中拖曳元素
在Elements中拖曳元素可以改變該元素在文檔流中的未知和顯示的樣式。
改變元素的狀態
- Right click on a child element and select 'Inspect Element'
- In the Elements panel right-click the parent element and choose "Force Element State"
- You can now choose one of :active, :hover, :focus or :visited to force the element into one of these states.
調試 less 或者 sass 代碼
Settings > General > Sources > Enable CSS source maps
** 更多關于樣式和DOM操作的技巧Editing Styles And The DOM**
