| %c | css 格式字符串"}}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"console.time(), timeEnd()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"time"}]},{"type":"text","text":" 和 "},{"type":"codeinline","content":[{"type":"text","text":"timeEnd"}]},{"type":"text","text":" 一般放在一起用，傳入一個參數用來標識起始位置用於統計時間:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"console.time('t')\nArray(900000).fill({}).forEach((v, index) => v.index = index)\nconsole.timeEnd('t')\n\/\/ t: 28.18603515625ms\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"會打印出中間代碼的執行時間"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"console.count()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"顧名思義。。計數,可以用來統計某個函數的執行次數，也可以傳入一個參數，並且根據傳入的參數分組統計調用的次數"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"function foo(type = '') {\n type ? console.count(type) : console.count()\n return 'type：' + type\n}\n\nfoo('A') \/\/A: 1\nfoo('B') \/\/B: 1\nfoo() \/\/default: 1\nfoo() \/\/default: 2\nfoo() \/\/default: 3\nfoo('A') \/\/A: 2\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"console.trace()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用於追蹤代碼的調用棧，不用專門斷點去看了"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"console.trace()\nfunction foo() {\n console.trace()\n}\nfoo()\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/28\/28b7077a67a8695827c922a13dc240ca.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"console.table()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"console.table()方法可以將複合類型的數據轉爲表格顯示"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var arr = [\n { name: '梅西', qq: 10 },\n { name: 'C 羅', qq: 7 },\n { name: '內馬爾', qq: 11 },\n]\nconsole.table(arr)\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/f0\/f02611d801cf892c3edfc99916a1994a.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"console.dir()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"按便於閱讀和打印的形式將對象打印"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var obj = {\n name: 'justwe7',\n age: 26,\n fn: function () {\n alert('justwe7')\n },\n}\nconsole.log(obj)\nconsole.dir(obj)\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c7\/c7e4c4b6efde1e0e5ad499cd5335ee01.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"打印 DOM 對象區別："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/ef\/efc91ff5b216cf1a9c94236bb3dc85a8.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"console.assert()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"斷言，用來進行條件判斷。當表達式爲 false 時，則顯示錯誤信息，不會中斷程序執行。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以用於提示用戶，內部狀態不正確（把那個說假話的揪出來）"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var val = 1\nconsole.assert(val === 1, '等於 1')\nconsole.assert(val !== 1, '不等於 1')\nconsole.log('代碼往下執行呢啊')\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/b8\/b85efe4ba2133b359f455dfb89288330.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"console.group(), groupEnd()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"分組輸出信息，可以用鼠標摺疊\/展開"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"console.group('分組 1')\nconsole.log('分組 1-1111')\nconsole.log('分組 1-2222')\nconsole.log('分組 1-3333')\nconsole.groupEnd()\nconsole.group('分組 2')\nconsole.log('分組 2-1111')\nconsole.log('分組 2-2222')\nconsole.log('分組 2-3333')\nconsole.groupEnd()\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/a3\/a3fb245c2ed87aff671aea099f03229c.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"$"}]},{"type":"text","text":" 選擇器"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"$_"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以記錄上次計算的結果，直接用於代碼執行:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/50\/5015573748380c27c6dc0d9520eaf8ac.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"$0,$1...$4"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"代表最近 5 個審查元素"},{"type":"text","marks":[{"type":"strong"}],"text":"選中"},{"type":"text","text":"過的 DOM 節點，看圖（是要選中一下，我更喜歡用存儲全局變量的方式玩，省的自己手殘又選了一個節點）："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/fc\/fc82f93d0e64f95c6bbfb6dbec5b9ec8.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"$和$$"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"$(selector)"}]},{"type":"text","text":"是原生 document.querySelector() 的封裝。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"$$(selector)"}]},{"type":"text","text":"返回的是所有滿足選擇條件的元素的一個集合，是 document.querySelectorAll() 的封裝"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"$x"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"將所匹配的節點放在一個數組裏返回"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"\n \n li 下的 p1\n li 下的 p2\n li 下的 p3\n \n\n 外面的 p\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"$x('\/\/li') \/\/ 所有的 li\n$x('\/\/p') \/\/ 所有的 p\n$x('\/\/li\/\/p') \/\/ 所有的 li 下的 p\n$x('\/\/li[p]') \/\/ 所有的 li 下的 p\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/29\/29cb9b90ca8af3461dbab24e06268805.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"keys(), values()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"跟 ES6 對象擴展方法， "},{"type":"codeinline","content":[{"type":"text","text":"Object.keys()"}]},{"type":"text","text":" 和 "},{"type":"codeinline","content":[{"type":"text","text":"Object.values()"}]},{"type":"text","text":" 相同"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"keys(obj);\nvalues(obj);"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"copy()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以直接將變量複製到剪貼板"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"copy(temp1)"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"與 "},{"type":"codeinline","content":[{"type":"text","text":"Save global variable"}]},{"type":"text","text":" 結合使用神器"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Element 面板"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此章節請打開 justwe7.github.io\/devtools\/element\/element.html 一起食用"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 Elements 面板中可以通過 DOM 樹的形式查看所有頁面元素，同時也能對這些頁面元素進行所見即所得的編輯"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"組合快捷鍵按鍵:Windows: "},{"type":"codeinline","content":[{"type":"text","text":"Control"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"Shift"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"C"}]},{"type":"text","text":"Mac: "},{"type":"codeinline","content":[{"type":"text","text":"Command"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"Option"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"C"}]}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"css 調試"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"style"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"選中目標節點，element 面版，查看 style->:hov,選擇對應的狀態即可"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/54\/54a43ba47581e595c201a33ed813899e.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":"br"}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/d7\/d74f4de9088a200b5e5a03165395c7d4.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"computed"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"有時候樣式覆蓋過多，查看起來很麻煩，"},{"type":"codeinline","content":[{"type":"text","text":"computed"}]},{"type":"text","text":" 就派上用場了"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/55\/5568f60914c2e47e0e3ad07fe7f6a8d7.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"點擊某個樣式可以直接跳轉至對應 css 定義"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"調整某個元素的數值"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"選中想要更改的值，按方向鍵上下就可以 "},{"type":"codeinline","content":[{"type":"text","text":"+ \/ -"}]},{"type":"text","text":" 1 個單位的值"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"alt + 方向鍵"}]},{"type":"text","text":" 可以 ×10 調整單位值"},{"type":"codeinline","content":[{"type":"text","text":"Ctrl + 方向鍵"}]},{"type":"text","text":" 可以 ×100 調整單位值"},{"type":"codeinline","content":[{"type":"text","text":"shift + 方向鍵"}]},{"type":"text","text":" 可以 \/10 調整單位"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"html 調試"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"騷操作"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"選中節點，直接按鍵盤 "},{"type":"codeinline","content":[{"type":"text","text":"H"}]},{"type":"text","text":" 可以直接讓元素顯示\/隱藏，不用手動敲樣式了，效果等同 "},{"type":"codeinline","content":[{"type":"text","text":"visibility: hidden"}]},{"type":"text","text":"，還是要佔據盒模型空間的。（記得把輸入法改成英文~）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/32\/329e69ad15b598f27d038bbff1a8a8d6.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"將某個元素存儲到全局臨時變量中"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"選中節點，右鍵，"},{"type":"codeinline","content":[{"type":"text","text":"Store as global variable"}]},{"type":"text","text":"（在 network 面板中也能用，尤其是篩選接口的返回值很方便）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c2\/c2f2e37ffac001059d8d6e415e73ce61.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"滾動到某個節點"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果頁面很長，想找一個文本節點的顯示位置又不想手動滑動可以試試 "},{"type":"codeinline","content":[{"type":"text","text":"Scroll into view"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c4\/c420f95dd6843752d008924a6d1989f4.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Edge 專屬的 3D 視圖"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用 chromium 後的 Edge 真的是改頭換面，"},{"type":"text","marks":[{"type":"strong"}],"text":"3D 視圖"},{"type":"text","text":"可以幫忙定位一些定位層級還有 DOM 嵌套的問題，頁面結構寫的好不好看很直觀的可以看出來(跟輔助功能裏面的 dom 樹結合使用很舒服)"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/0c\/0c9b738fedfeb81b16577185f53fb91a.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"目前 chrome 還是沒有這項功能的，Edge 打開位置：控制檯打開狀態 => "},{"type":"codeinline","content":[{"type":"text","text":"Esc"}]},{"type":"text","text":"打開抽屜 => "},{"type":"codeinline","content":[{"type":"text","text":"···"}]},{"type":"text","text":"選擇 3D 視圖面板"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"DOM 斷點"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以監聽到 DOM 節點的變更(子節點變動\/屬性變更\/元素移除)，並斷點至變更 DOM 狀態的 js 代碼行："}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/88\/8898da014932ab5a6882e09efc831a9a.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Network 面板"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以查看通過網絡請求的資源的相關詳細信息"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"組合快捷鍵按鍵:"}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Windows: "},{"type":"codeinline","content":[{"type":"text","text":"Control"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"Shift"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"I"}]}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Mac: "},{"type":"codeinline","content":[{"type":"text","text":"Command"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"Option"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"I"}]}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"按區域劃分大概分爲如下幾個區域："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c5\/c50769de5a61511e63d0cc7b1f28e5cf.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":null,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Controls"}]},{"type":"text","text":" - 控制 Network 功能選項，以及一些展示外觀"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Filters"}]},{"type":"text","text":" - 控制在 Requests Table 中顯示哪些類型的資源"}]},{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"tips：按住 Cmd (Mac) 或 Ctrl (Windows\/Linux) 並點擊篩選項可以同時選擇多個篩選項"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Overview"}]},{"type":"text","text":" - 此圖表顯示了資源檢索時間的時間線。如果看到多條豎線堆疊在一起，則說明這些資源被同時檢索"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":5,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Requests Table"}]},{"type":"text","text":" - 此表格列出了檢索的每一個資源。 默認情況下，此表格按時間順序排序，最早的資源在頂部。點擊資源的名稱可以顯示更多信息。 提示：右鍵點擊 Timeline 以外的任何一個表格標題可以添加或移除信息列"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":6,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Summary"}]},{"type":"text","text":" - 可以一目瞭然地看到頁面的請求總數、傳輸的數據總量、加載時間"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":7,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"（1、2）Controls，Filters 區域"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/a4\/a477eee5d5c5b5050e7f736d13cdf59c.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Filters 控制的展示："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"使用大請求行"},{"type":"text","text":" - 默認情況下，"},{"type":"codeinline","content":[{"type":"text","text":"Requests Table"}]},{"type":"text","text":"一個資源只顯示很小的一行。選中"},{"type":"codeinline","content":[{"type":"text","text":"Use large resource rows"}]},{"type":"text","text":"(使用大資源行)按鈕可以顯示兩個文本字段：主要字段和次要字段。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"捕獲屏幕截圖"},{"type":"text","text":" - 將鼠標懸停在某個屏幕截圖上的時候，Timeline\/Waterfall(時間軸)會顯示一條垂直的黃線，指示該幀是何時被捕獲的"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"顯示概述"},{"type":"text","text":" - 展示頁面整個生命週期的各個階段（Overview 區域）的耗時（藍色綠色的那些橫槓）"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"（3） Overview 區域"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"頁面整個生命週期的各個階段網絡資源加載耗時信息的彙總，可以選擇區域來篩選 "},{"type":"codeinline","content":[{"type":"text","text":"Requests Table"}]},{"type":"text","text":" 的詳細資源信息"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"(4) Requests Table 區域"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"標題欄的對應描述："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Name"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(名稱)"},{"type":"text","text":": 資源的名稱。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Status"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(狀態)"},{"type":"text","text":": HTTP 狀態代碼。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Type"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(類型)"},{"type":"text","text":": 請求的資源的 MIME 類型。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Initiator"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(發起)"},{"type":"text","text":": 發起請求的對象或進程。它可能有以下幾種值："}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Parser"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(解析器)"},{"type":"text","text":": Chrome 的 HTML 解析器發起了請求。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Redirect"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(重定向)"},{"type":"text","text":": HTTP 重定向啓動了請求。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Script"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(腳本)"},{"type":"text","text":": 腳本啓動了請求。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Other"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(其他)"},{"type":"text","text":": 一些其他進程或動作發起請求，例如用戶點擊鏈接跳轉到頁面，或在地址欄中輸入網址。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Size"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(大小)"},{"type":"text","text":": 響應頭的大小（通常是幾百字節）加上響應數據，由服務器提供。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Time"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(時間)"},{"type":"text","text":": 總持續時間，從請求的開始到接收響應中的最後一個字節"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Timeline\/Waterfall"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(時間軸)"},{"type":"text","text":": 顯示所有網絡請求的可視化統計信息"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在標題欄如(Name 上)右鍵，可以添加或刪除信息列。比如可以多加一列 Response Header => Content-Encoding 選項來總覽頁面資源的 gzip 壓縮情況:"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/9f\/9fa3ccdd2ae3642f52d30f95806e7322.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"重新發起"},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"xhr"}]},{"type":"text","text":"請求"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在平時和後端聯調時，我們用的最多的可能就是"},{"type":"codeinline","content":[{"type":"text","text":"Network"}]},{"type":"text","text":"面板了。但是每次想重新查看一個請求通過刷新頁面、點擊按鈕等方式去觸發"},{"type":"codeinline","content":[{"type":"text","text":"xhr"}]},{"type":"text","text":"請求，這種方式有時顯得會比較麻煩，可以通過"},{"type":"codeinline","content":[{"type":"text","text":"Replay XHR"}]},{"type":"text","text":"的方式去發起一條新的請求："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/4d\/4d716d59ccc7a73f699bd8723cacafd4.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"查看 HTTP 相關信息"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"查看網絡請求的參數"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以通過點擊 "},{"type":"codeinline","content":[{"type":"text","text":"query string parameters"}]},{"type":"text","text":" (查詢字符串參數)旁邊的 "},{"type":"codeinline","content":[{"type":"text","text":"view URL encoded"}]},{"type":"text","text":" (查看 URL 編碼)或 "},{"type":"codeinline","content":[{"type":"text","text":"view decoded"}]},{"type":"text","text":" (查看解碼)鏈接，查看 URL 編碼或解碼格式的 "},{"type":"codeinline","content":[{"type":"text","text":"query string parameters"}]},{"type":"text","text":" (查詢字符串參數)。在使用 postman 複製相關入參時尤其實用。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/d7\/d744e84cbd2ecec898c6c694d0c2115e.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"查看 HTTP 響應內容"},{"type":"text","text":"點擊 Response(響應)標籤頁可以查看該資源未格式化的 HTTP 響應內容"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接口的返回值(在 preview 中）同樣也可以 "},{"type":"codeinline","content":[{"type":"text","text":"Save global variable"}]},{"type":"text","text":" 存儲一個全局變量"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/cd\/cda2dafb5c827cf6340316ed2e4e5ff4.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Size 和 Time 爲什麼有兩行參數？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/a7\/a7155cc3a8fa92ab548d4cb30966b736.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"關於 Size 列"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Size"}]},{"type":"text","text":"有兩行："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第一行表示的是數據的"},{"type":"text","marks":[{"type":"strong"}],"text":"傳輸時"},{"type":"text","text":"的大小，例如上圖中的"},{"type":"codeinline","content":[{"type":"text","text":"190KB"}]}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第二行表示的是數據"},{"type":"text","marks":[{"type":"strong"}],"text":"實際"},{"type":"text","text":"的大小"},{"type":"codeinline","content":[{"type":"text","text":"708KB"}]}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在服務器端採取"},{"type":"codeinline","content":[{"type":"text","text":"gzip"}]},{"type":"text","text":"壓縮算法將原有"},{"type":"codeinline","content":[{"type":"text","text":"708KB"}]},{"type":"text","text":"壓縮至"},{"type":"codeinline","content":[{"type":"text","text":"190KB"}]},{"type":"text","text":",傳輸大小縮短"},{"type":"codeinline","content":[{"type":"text","text":"3.7 倍"}]},{"type":"text","text":"，大大的提高了資源傳輸的效率"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"需要注意的點："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"gzip"}]},{"type":"text","text":"壓縮只會壓縮"},{"type":"codeinline","content":[{"type":"text","text":"響應體"}]},{"type":"text","text":"內容，所以適用於返回數據量大的時候，如果數據量太小的話，有可能會導致數據"},{"type":"text","marks":[{"type":"strong"}],"text":"傳輸時"},{"type":"text","text":"的大小比"},{"type":"text","marks":[{"type":"strong"}],"text":"實際"},{"type":"text","text":"大小要大("},{"type":"text","marks":[{"type":"italic"}],"text":"加入了一些額外的響應頭"},{"type":"text","text":")"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"關於 Time 列"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Time 有兩行："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第一行表示從客戶端發送請求到服務端返回所有數據所花費的總時間，對於上圖來說就是"},{"type":"codeinline","content":[{"type":"text","text":"471ms"}]}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第二行表示的是從客戶端發送請求到服務器端返回第一個字節所表示的時間，對於上圖來說就是"},{"type":"codeinline","content":[{"type":"text","text":"55ms"}]}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第一行的時間代表了所有項目：例如"},{"type":"codeinline","content":[{"type":"text","text":"解析 dns"}]},{"type":"text","text":"，"},{"type":"codeinline","content":[{"type":"text","text":"建立連接"}]},{"type":"text","text":"，"},{"type":"codeinline","content":[{"type":"text","text":"等待服務器返回數據"}]},{"type":"text","text":"，"},{"type":"codeinline","content":[{"type":"text","text":"傳輸數據"}]},{"type":"text","text":"等"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第二行的時間是 "},{"type":"codeinline","content":[{"type":"text","text":"總時間 - 數據傳輸"}]},{"type":"text","text":"的時間"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"從上面的分析中我們看到 從"},{"type":"text","marks":[{"type":"strong"}],"text":"客戶端請求到服務器處理結束準備返回數據"},{"type":"text","text":"花了"},{"type":"codeinline","content":[{"type":"text","text":"55ms"}]},{"type":"text","text":"，但是在進行"},{"type":"text","marks":[{"type":"strong"}],"text":"傳輸數據"},{"type":"text","text":"的時候花費了"},{"type":"codeinline","content":[{"type":"text","text":"471ms"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對於網慢的用戶來說，可能會耗費更長的時間，所以在寫代碼（接口）的時候，返回的數據量要儘量精簡"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Waterfall"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"點擊某個資源會展示出詳細的網絡加載信息："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/2c\/2c3ac8e172773e919d60eeb649b3db8f.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相關字段描述:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Queuing"}]},{"type":"text","text":" (排隊)"}]},{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"瀏覽器在以下情況下對請求排隊"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"存在更高優先級的請求,請求被渲染引擎推遲，這經常發生在 images（圖像）上,因爲它被認爲比關鍵資源（如腳本\/樣式）的優先級低。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此源已打開六個 TCP 連接，達到限值，僅適用於 HTTP\/1.0 和 HTTP\/1.1。在等待一個即將被釋放的不可用的 TCP socket"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"瀏覽器正在短暫分配磁盤緩存中的空間，生成磁盤緩存條目（通常非常快）"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Stalled"}]},{"type":"text","text":" (停滯) - 發送請求之前等待的時間。它可能因爲進入隊列的任意原因而被阻塞，這個時間包括代理協商的時間。請求可能會因 Queueing 中描述的任何原因而停止。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"DNS lookup"}]},{"type":"text","text":" (DNS 查找) - 瀏覽器正在解析請求 IP 地址，頁面上的每個新域都需要完整的往返(roundtrip)才能進行 DNS 查找"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Proxy Negotiation"}]},{"type":"text","text":" - 瀏覽器正在與代理服務器協商請求"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"initial connection"}]},{"type":"text","text":" (初始連接) - 建立連接所需的時間，包括 TCP 握手\/重試和協商 SSL。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"SSL handshake"}]},{"type":"text","text":" (SSL 握手) - 完成 SSL 握手所用的時間"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Request sent"}]},{"type":"text","text":" (請求發送) - 發出網絡請求所花費的時間，通常是幾分之一毫秒。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Waiting"}]},{"type":"text","text":" (等待) - 等待初始響應所花費的時間，也稱爲"},{"type":"codeinline","content":[{"type":"text","text":"Time To First Byte"}]},{"type":"text","text":"(接收到第一個字節所花費的時間)。這個時間除了等待服務器傳遞響應所花費的時間之外，還包括 1 次往返延遲時間及服務器準備響應所用的時間（服務器發送數據的延遲時間）"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Content Download"}]},{"type":"text","text":"(內容下載) - 接收響應數據所花費的時間(從接收到第一個字節開始，到下載完最後一個字節結束)"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"ServiceWorker Preparation"}]},{"type":"text","text":" - 瀏覽器正在啓動 Service Worker"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Request to ServiceWorker"}]},{"type":"text","text":" - 正在將請求發送到 Service Worker"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Receiving Push"}]},{"type":"text","text":" - 瀏覽器正在通過 HTTP\/2 服務器推送接收此響應的數據"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Reading Push"}]},{"type":"text","text":" - 瀏覽器正在讀取之前收到的本地數據"}]}]}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/cf\/cf499091ee26378f9741fa997d29eb1e.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"(5) Summary 區域"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/63\/63754c30592ef00962d1521f590914ba.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"requests"}]},{"type":"text","text":" 查看請求的總數量 | "},{"type":"codeinline","content":[{"type":"text","text":"transferred"}]},{"type":"text","text":" 查看請求的總大小 | "},{"type":"codeinline","content":[{"type":"text","text":"resources"}]},{"type":"text","text":" 資源 | "},{"type":"codeinline","content":[{"type":"text","text":"Finish"}]},{"type":"text","text":" 所有 http 請求響應完成的時間 | DOMContentLoaded 時間 | load 時間"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當頁面的初始的標記被解析完時，會觸發 "},{"type":"codeinline","content":[{"type":"text","text":"DOMContentLoaded"}]},{"type":"text","text":"。 它在 Network(網絡)面板上的顯示："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 Overview (概覽)窗格中的藍色垂直線表示這個事件。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 Requests Table (請求列表)中的紅色垂直線也表示這個事件。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 Summary (概要)窗格中，您可以查看事件的確切時間。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/d2\/d240bb77770d616a268cd54a3bf1fb80.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當頁面完全加載時觸發 "},{"type":"codeinline","content":[{"type":"text","text":"load"}]},{"type":"text","text":" 事件。 它顯示也顯示在："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 Overview (概覽)窗格的紅色垂直線表示這個事件。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 Requests Table (請求列表)中的紅色垂直線也表示這個事件。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 Summary (概要)中，可以查看改事件的確切時間"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/81\/817803eb6c46e42c32fabd04e5eca875.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"DOMContentLoaded 會比 Load 時間小，兩者時間差大致等於外部資源加載（一般是圖片\/字體）的時間"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Finish 時間是頁面上所有 http 請求發送到響應完成的時間（如果頁面存在一個輪詢的接口，這個值也會累加的）。HTTP1.0\/1.1 協議限定單個域名的請求併發量是 6 個，即 Finish 是所有請求（不只是 XHR 請求，還包括 DOC，img，js，css 等資源的請求）在併發量爲 6 的限制下完成的時間。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Finish 的時間比 Load 大，意味着頁面有相當部分的請求量"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Finish 的時間比 Load 小，意味着頁面請求量很少，如果頁面是隻有一個 html 文檔請求的靜態頁面，Finish 時間基本就等於 HTML 文檔請求的時間"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以 Finish 時間與 DOMContentLoaded 和 Load 並無直接關係"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"horizontalrule"},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"頭圖：Unsplash"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"作者：李華西"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文：https:\/\/mp.weixin.qq.com\/s\/G8e82OZp3vqsw-ihHmFQIA"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文：Chrome DevTools 全攻略！助力高效開發"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"來源：微醫大前端技術 - 微信公衆號 [ID：wed_fed]"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"轉載：著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。"}]}]} |
{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Console 面板"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此章節請打開 justwe7.github.io\/devtools\/console\/console.html 一起食用"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一方面用來記錄頁面在執行過程中的信息（一般通過各種 console 語句來實現），另一方面用來當做 shell 窗口來執行腳本以及與頁面文檔、DevTools 等進行交互"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"組合快捷鍵按鍵:Windows: "},{"type":"codeinline","content":[{"type":"text","text":"Control"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"Shift"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"J"}]},{"type":"text","text":"Mac: "},{"type":"codeinline","content":[{"type":"text","text":"Command"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"Option"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"J"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先看一下 console 對象下面都有哪些方法:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/48\/48f1004824977a9f2fe978c6167fbca4.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"console.clear()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"顧名思義，清空控制檯"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"console.log(), info(), warn(), error()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"日常用的比較多的就是這幾個了，其中 "},{"type":"codeinline","content":[{"type":"text","text":"log"}]},{"type":"text","text":" 和 "},{"type":"codeinline","content":[{"type":"text","text":"info"}]},{"type":"text","text":"，印象中在 2016 年之前老用 info 打印，還是有區別的，"},{"type":"codeinline","content":[{"type":"text","text":"info"}]},{"type":"text","text":" 輸出的內容前面是有一個藍色背景的小圈, 大概跟這個差不多: i，後來 chrome 更新就沒了(IE 還是可以看出差別的)"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"console.log('普通信息')\nconsole.info('提示性信息')\nconsole.error('錯誤信息')\nconsole.warn('警示信息')\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/f8\/f84d946cf19a10fffc8e6fcf6b632391.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"使用佔位符"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"\/\/ 支持逗號分隔參數，不需要每個參數都單獨打印\nconsole.log(1, '2', +'3')\n\/\/ 佔位符\n\/\/ %s \nconsole.log('今晚%s 老虎', '打', '？？？')\n\/\/ %c \nconsole.log('今晚%s%c 老虎', '打', 'color: red', '？？？')\n\/\/ 帶有佔位符的參數之後的若干參數屬於佔位符的配置參數\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/d2\/d2544a9502f3b8816484c20dae914fda.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其餘的佔位符列表還有："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"embedcomp","attrs":{"type":"table","data":{"content":"