![]()
{"type":"doc","content":[{"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":"使用開發者工具是開發人員的日常，但多數人往往只使用其中的一小部分，很多功能其實都無人問津。在微軟Edge項目部擔任開發者工具首席產品經理的Christian Heilmann認爲，開發者工具正變得越來越複雜和強勢，要解決這個問題則需要意識到，"},{"type":"text","marks":[{"type":"strong"}],"text":"開發者工具不該指望用戶成爲專家，而是"},{"type":"text","marks":[{"type":"strong"},{"type":"strong"},{"type":"strong"}],"text":"要"},{"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":"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瀏覽器”是指一切使用Chromium內核、並提供全部開發者工具的瀏覽器，其中包括Chrome、Microsoft Edge以及Brave等等。"}]},{"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":"順帶一提，Microsoft Edge雖然是Windows 10\/11的內置瀏覽器，但是基於Chromium內核開發，所以從平臺類型的角度看類似於Chrome。只是各款瀏覽器在用戶體驗與具體服務選項上有所區別。Edge Developer Tools也與谷歌密切合作，產品內的不少工作成果也會被反哺到Chromium內核當中。最後，以下提到的部分實驗只在Microsoft Edge當中成立，感興趣的人可以選擇相應的Edge Windows、Mac及Linux版本進行驗證。好了，話不多說，馬上進入正題："}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"1. Console不只是 “log()”"}]},{"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":"毫無疑問，除了Elements工具之外，Console可說是瀏覽器開發者工具中使用頻率最高的組成部分。人們習慣於在代碼中添加“console.log()”進行調試，瞭解到底發生了什麼。當然，實際還有更好的方法來調試腳本；但考慮到這種習慣已經相當普遍，所以我們就聊聊如何改善這種體驗。"}]},{"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會發生堵塞。爲了避免由此帶來的信息查找障礙，最好能充分使用Console提供的"},{"type":"link","attrs":{"href":"https:\/\/docs.microsoft.com\/zh-cn\/microsoft-edge\/devtools-guide-chromium\/console\/console-filters","title":"","type":null},"content":[{"type":"text","text":"控制檯消息篩選"}]},{"type":"text","text":"選項。正確使用這些選項既能保證良好的跟蹤能力，也可以屏蔽掉大量噪聲。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/89\/89700a80164e2c1f605a56827fb76cc7.png","alt":null,"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":"我們在記錄什麼？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可能很多朋友在使用“console.log()”時，都僅僅忙於記錄下具體值、卻忘記爲其添加來源。例如，在使用以下代碼時，我們會得到一份數字清單，但卻並不清楚這份清單的含義。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"plain"},"content":[{"type":"text","text":"console.log(width)\nconsole.log(height)\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":"解決這個問題的簡單方法，就是把要記錄的內容用大括號括起來。這樣Console就會同時記錄下值與名稱。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"plain"},"content":[{"type":"text","text":"console.log({width})\nconsole.log({height})\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/29\/29dbded4e46b708a560e94e4d2c1b82d.png","alt":null,"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":"豐富你的Console詞彙表"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/10\/10b941bb1e0ad535541e1839dffb2b91.png","alt":null,"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":"除了“console.log()”以外，大家還可以使用"},{"type":"link","attrs":{"href":"https:\/\/docs.microsoft.com\/zh-cn\/microsoft-edge\/devtools-guide-chromium\/console\/console-log","title":"","type":null},"content":[{"type":"text","text":"其他多種方法"}]},{"type":"text","text":"。例如用“console.warn()”記錄警告消息，使用“console.info()”記錄信息內容、使用“console.error()”記錄錯誤消息。這不僅能改變console當中的顯示內容，還能爲消息建立起一種差異化記錄層級，大大降低記錄內容的過濾難度。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Console中的錯誤與斷言"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/74\/74234d430fc1b456bc11da75e00d47d0.png","alt":null,"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":"在Console中顯示錯誤確實要比直接彈出錯誤緩和得多，但我們最好能同時爲產品維護或調試人員提供問題的嚴重性提示。這裏介紹的有趣方法就是“console.assert()”，它只會在滿足特定條件時記錄一條消息。對於這類需求，以往大家可能更習慣於編寫包含“console.log()”的“if”語句；但這裏推薦大家直接使用“assert()”，這樣更有利於後續清理調試代碼。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"跟蹤事物來源"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/b3\/b32865a84db42c5bc40dd74123d59155.png","alt":null,"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":"通常我們可能會添加“console.log(‘Called’)”或者類似的表達來測試某項功能是否被觸發。在得到肯定的答案後，接下來當然是找出調用該方法的根源。這時候就該“console.trace()”大顯身手了，它不僅能告訴我們哪些東西被調用過、還能告訴我們調用操作來自何處。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"對console消息進行分組"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果大家有很多消息需要記錄，不妨使用“console.group(‘name’)”與“console.groupEnd(‘name’)”將消息打包至Console中的可摺疊與可擴展消息內，甚至可以設置默認情況下使用擴展或者是摺疊分組。"}]},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/cc\/f1\/cc01440b38290bc98104e6ac753cb5f1.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"將console中的大量信息顯示並過濾爲表格形式"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果把大量信息直接顯示爲日誌，那閱讀起來絕對讓人血壓上升。好在“console.talbe()”方法能夠在console當中將這類數組式數據顯示爲表格形式，我們則提交想要查看的屬性數組對顯示內容進行過濾。"}]},{"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":"例如，我們可以使用“let elms = document.querySelectorAll(‘:is(h1,p,script’)”獲取文檔中的所有H1、段落與腳本元素，並使用“console.table(elms)”將信息結論顯示爲表格。由於不同元素中包含大量屬性與特性，所以生成的表格仍然非常難以閱讀。這裏我們可以使用“console.table(elms,[‘nodeName’, ‘innerText’, ‘offsetHeight’])”進一步開展過濾，最終獲得一個只包含所需屬性及其值的表格。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c1\/c14b56d2227c422d1c4a75886821723b.png","alt":null,"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":"在複製和粘貼此信息時，表格結構將保持不變。這也讓此功能成爲將數據導入Excel或者Word的絕佳工具。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"靈活運用：$() and $$()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Console當中提供多種易於使用的便捷方法，被稱爲Console Utilitiers。其中兩個非常實用的代表就是“$()”與“$$()”，它們分別對應着“document.querySelector()”與“document.querySelectorAll()”。這些不僅能返回我們需要的nodeList，還會將結果轉換爲數組，因此可以直接在結果上使用“map()”與“filter()”。以下代碼就能獲取當前文檔內的所有鏈接並返回一個數組，其中的對象僅包含各鏈接的“href”與“innerText”屬性作爲“url”及“text”屬性。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"embedcomp","attrs":{"type":"table","data":{"content":"
| $$('a').map(a => {<br> return {url: a.href, text: a.innerText}<br>})"}}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"2. 無需源代碼即可記錄——Live Expressions與Logpoints"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"(適用於Chromium瀏覽器)"}]},{"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.log()”的正確使用方式，當然是放置在代碼中希望獲取信息的位置。但我們也可以使用它深入瞭解自己無法訪問或變更的代碼。"},{"type":"link","attrs":{"href":"https:\/\/docs.microsoft.com\/zh-cn\/microsoft-edge\/devtools-guide-chromium\/console\/live-expressions","title":"","type":null},"content":[{"type":"text","text":"Live Expressions"}]},{"type":"text","text":"就是一種無需變更代碼即可記錄信息的好辦法。它們能夠以驚人的速度記錄不斷變化的值，但又不會給Console帶來太大壓力、拖慢運行速度。"}]},{"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":"Logpoints則是一種特殊的斷點。我們可以在開發者工具的Sources tool中右鍵點擊JavaScript中的任意一行並設置logpoint。系統會提示我們輸入想要記錄表達式，之後即可在該代碼行運行時通過console獲取它的值。所以從技術上講，我們完全可以在web的任意位置上插入“console.log()”。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"3. 在瀏覽器外也能記錄 – VS Code調試器"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"（適用於Chromium瀏覽器及VS Code）"}]},{"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":"在Visual Studio Code中啓動調試會話時，我們可以生成一個瀏覽器實例，並通過開瀏覽器開發者工具將Debug Console作爲Console使用。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/7f\/7f7cdc6fbccc7b74bb9e8ad237db54d9.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"4. 將代碼注入至任意站點——Snippets與Overrides"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"(適用於Chromium瀏覽器)"}]},{"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":"link","attrs":{"href":"https:\/\/docs.microsoft.com\/zh-cn\/microsoft-edge\/devtools-guide-chromium\/javascript\/snippets","title":"","type":null},"content":[{"type":"text","text":"Snippets"}]},{"type":"text","text":"是一種針對當前網站運行腳本的方式。我們可以在這些腳本中使用"},{"type":"link","attrs":{"href":"https:\/\/docs.microsoft.com\/zh-cn\/microsoft-edge\/devtools-guide-chromium\/console\/utilities","title":"","type":null},"content":[{"type":"text","text":"Console Utilities"}]},{"type":"text","text":"，進而編寫並存儲那些需要在Console中執行的高複雜度DOM操作腳本。大家可以使用snippets編輯器或者命令菜單，在當前文檔的窗口上下文內運行腳本。如果是使用命令菜單的情況，請注意在命令開頭使用！並輸入要運行的代碼段名稱。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/docs.microsoft.com\/zh-cn\/microsoft-edge\/devtools-guide-chromium\/javascript\/overrides","title":"","type":null},"content":[{"type":"text","text":"Overrides"}]},{"type":"text","text":"的作用是爲遠程腳本存儲一份本地副本，並在頁面加載時執行覆蓋。例如，如果我們的整個應用程序構建過程太過緩慢，但又希望隨時嘗試一點新鮮設計，那麼overrides就能發揮作用了。另外，這款工具還能在無需瀏覽器擴展的前提下，替換掉第三方網站中那些煩人的腳本。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"5. 檢查與調試工具的豐富程度遠超你的想象"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"(適用於Chromium瀏覽器)"}]},{"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開發者工具的第一印象可能來自Google Chrome、Brave或者Microsoft Edge等瀏覽器，但這些工具的適用環境遠不止於此。一切基於Electron的應用程序都能啓用這些工具，供我們查看引擎蓋之下的代碼究竟是如何構建完成的。例如，我們可以在GitHub Desktop以及Visual Studio Code中使用，甚至可以利用開發者工具調試瀏覽器中的開發者工具本身。"}]},{"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":"觀察開發者工具，可以看到它們是用HTML、CSS以及TyperScript編寫而成。這樣的技術使用環境令人興奮，因爲我們能清楚地看到代碼運行在怎樣的渲染引擎當中——這是在Web端永遠體會不到的快樂。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/b9\/b98f0dbd6bc2070d0f19fa52359f7923.png","alt":null,"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":"Visual Studio Code中的Edge開發者工具"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"(適用於Microsoft Edge搭配VS Code擴展)"}]},{"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":"link","attrs":{"href":"https:\/\/marketplace.visualstudio.com\/items?itemName=ms-edgedevtools.vscode-edge-devtools","title":"","type":null},"content":[{"type":"text","text":"。Microsoft Edge Tools for Visual Studio Code"}]},{"type":"text","text":"擴展就將這些工具引入了Visual Studio Code。如此一來，我們可以直接在代碼編輯器一旁使用可視化調試工具，徹底告別二者之間反覆切換的煩惱。在首次使用時，系統會提示用戶安裝擴展；之後每當我們調試會話並單擊開發者工具圖標，這些工具就會應聲開啓。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/94\/946c3ed3eb36081754f58aa57555828c.png","alt":null,"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":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/be\/bebaf0a5cce252ac8204b83878f3f79b.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"6. 發掘更多寶藏功能……"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在親自打理開發者工具一段時間之後，我從反饋信息中總結出了幾點令人遺憾的事實。首先是，雖然我們都對開發者工具的驚人表現感到興奮，但用戶往往只使用其中的一小部分。很多東西好是好的，但卻總是靜靜躺在演示文稿和視頻教程當中沉睡，壓根無人問津。剛開始我們以爲是因爲說明文檔不夠着實，於是花了大量時間更新"},{"type":"link","attrs":{"href":"https:\/\/docs.microsoft.com\/zh-cn\/microsoft-edge\/devtools-guide-chromium\/","title":"","type":null},"content":[{"type":"text","text":"DevTools文檔"}]},{"type":"text","text":"，確保所有功能都擁有全面的描述與解釋。"},{"type":"text","marks":[{"type":"strong"}],"text":"但事後來看情況並非如此，多數開發者只有實在沒有辦法（在谷歌、Stack Overflow乃至其他社交渠道上都找不到答案）時，纔會把說明文檔視爲最後的救命稻草。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"開發者工具越來越複雜、越來越強勢——談談我的解決思路"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"(適用於Microsoft Edge)"}]},{"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":"blockquote","content":[{"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":"我們正在嘗試一系列簡化操作的想法，相應的結果很快就會在Microsoft Edge中得到體現。其中一項探索就是“Focus Mode”，在這裏界面不再顯示所有工具和選項卡，而是將工具分類至不同的用例當中，例如“Elements\/CSS調試”、“源代碼\/JavaScript調試”或者“網絡檢查”等。其核心思路非常簡單，就是隱藏掉一切可能令人困惑或妨礙效率的工具，只顯示與當前工作相關的工具。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c1\/c167e2d314a1bce390d7b3d453f5587a.png","alt":null,"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":"我們正在研究的另一項功能是“informational overlays”。我們打算提供一個幫助按鈕，用於開啓開發者工具的覆蓋框，具體解釋每款工具是什麼、如何使用並列出說明文檔鏈接。我們希望這一設計能夠幫大家更輕鬆地瞭解各項功能。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/f5\/f56d5c7d3ce1c1fa14e50a59c57784b6.png","alt":null,"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":"代碼編寫與結果調試之間仍然相互脫節"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"（適用於Microsoft Edge)"}]},{"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":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們目前正在研究兩種方法，希望降低整個調試與修改流程。一種就是儘量使用Visual Studio Code替代開發者工具中的編輯器，並在用戶使用開發者工具時直接更改磁盤驅動器上的文件。另一種則是藉助VS Code擴展來實現，允許大家在使用開發者工具時直接修改編輯器內的源代碼，並在完成後明確指示是否要替換掉磁盤上的真實源文件。"}]},{"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":"最後，Christian Heilmann呼籲開發者積極反饋意見，“我們努力在讓反饋與響應變得更加便捷。例如，Visual Studio Code擴展就提供了醒目的鏈接與按鈕，可供隨時上報問題和申請功能。”"}]}]} |
|---|
{"type":"doc","content":[{"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":"使用開發者工具是開發人員的日常，但多數人往往只使用其中的一小部分，很多功能其實都無人問津。在微軟Edge項目部擔任開發者工具首席產品經理的Christian Heilmann認爲，開發者工具正變得越來越複雜和強勢，要解決這個問題則需要意識到，"},{"type":"text","marks":[{"type":"strong"}],"text":"開發者工具不該指望用戶成爲專家，而是"},{"type":"text","marks":[{"type":"strong"},{"type":"strong"},{"type":"strong"}],"text":"要"},{"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":"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瀏覽器”是指一切使用Chromium內核、並提供全部開發者工具的瀏覽器，其中包括Chrome、Microsoft Edge以及Brave等等。"}]},{"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":"順帶一提，Microsoft Edge雖然是Windows 10\/11的內置瀏覽器，但是基於Chromium內核開發，所以從平臺類型的角度看類似於Chrome。只是各款瀏覽器在用戶體驗與具體服務選項上有所區別。Edge Developer Tools也與谷歌密切合作，產品內的不少工作成果也會被反哺到Chromium內核當中。最後，以下提到的部分實驗只在Microsoft Edge當中成立，感興趣的人可以選擇相應的Edge Windows、Mac及Linux版本進行驗證。好了，話不多說，馬上進入正題："}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"1. Console不只是 “log()”"}]},{"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":"毫無疑問，除了Elements工具之外，Console可說是瀏覽器開發者工具中使用頻率最高的組成部分。人們習慣於在代碼中添加“console.log()”進行調試，瞭解到底發生了什麼。當然，實際還有更好的方法來調試腳本；但考慮到這種習慣已經相當普遍，所以我們就聊聊如何改善這種體驗。"}]},{"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會發生堵塞。爲了避免由此帶來的信息查找障礙，最好能充分使用Console提供的"},{"type":"link","attrs":{"href":"https:\/\/docs.microsoft.com\/zh-cn\/microsoft-edge\/devtools-guide-chromium\/console\/console-filters","title":"","type":null},"content":[{"type":"text","text":"控制檯消息篩選"}]},{"type":"text","text":"選項。正確使用這些選項既能保證良好的跟蹤能力，也可以屏蔽掉大量噪聲。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/89\/89700a80164e2c1f605a56827fb76cc7.png","alt":null,"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":"我們在記錄什麼？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可能很多朋友在使用“console.log()”時，都僅僅忙於記錄下具體值、卻忘記爲其添加來源。例如，在使用以下代碼時，我們會得到一份數字清單，但卻並不清楚這份清單的含義。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"plain"},"content":[{"type":"text","text":"console.log(width)\nconsole.log(height)\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":"解決這個問題的簡單方法，就是把要記錄的內容用大括號括起來。這樣Console就會同時記錄下值與名稱。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"plain"},"content":[{"type":"text","text":"console.log({width})\nconsole.log({height})\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/29\/29dbded4e46b708a560e94e4d2c1b82d.png","alt":null,"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":"豐富你的Console詞彙表"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/10\/10b941bb1e0ad535541e1839dffb2b91.png","alt":null,"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":"除了“console.log()”以外，大家還可以使用"},{"type":"link","attrs":{"href":"https:\/\/docs.microsoft.com\/zh-cn\/microsoft-edge\/devtools-guide-chromium\/console\/console-log","title":"","type":null},"content":[{"type":"text","text":"其他多種方法"}]},{"type":"text","text":"。例如用“console.warn()”記錄警告消息，使用“console.info()”記錄信息內容、使用“console.error()”記錄錯誤消息。這不僅能改變console當中的顯示內容，還能爲消息建立起一種差異化記錄層級，大大降低記錄內容的過濾難度。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Console中的錯誤與斷言"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/74\/74234d430fc1b456bc11da75e00d47d0.png","alt":null,"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":"在Console中顯示錯誤確實要比直接彈出錯誤緩和得多，但我們最好能同時爲產品維護或調試人員提供問題的嚴重性提示。這裏介紹的有趣方法就是“console.assert()”，它只會在滿足特定條件時記錄一條消息。對於這類需求，以往大家可能更習慣於編寫包含“console.log()”的“if”語句；但這裏推薦大家直接使用“assert()”，這樣更有利於後續清理調試代碼。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"跟蹤事物來源"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/b3\/b32865a84db42c5bc40dd74123d59155.png","alt":null,"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":"通常我們可能會添加“console.log(‘Called’)”或者類似的表達來測試某項功能是否被觸發。在得到肯定的答案後，接下來當然是找出調用該方法的根源。這時候就該“console.trace()”大顯身手了，它不僅能告訴我們哪些東西被調用過、還能告訴我們調用操作來自何處。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"對console消息進行分組"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果大家有很多消息需要記錄，不妨使用“console.group(‘name’)”與“console.groupEnd(‘name’)”將消息打包至Console中的可摺疊與可擴展消息內，甚至可以設置默認情況下使用擴展或者是摺疊分組。"}]},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/cc\/f1\/cc01440b38290bc98104e6ac753cb5f1.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"將console中的大量信息顯示並過濾爲表格形式"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果把大量信息直接顯示爲日誌，那閱讀起來絕對讓人血壓上升。好在“console.talbe()”方法能夠在console當中將這類數組式數據顯示爲表格形式，我們則提交想要查看的屬性數組對顯示內容進行過濾。"}]},{"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":"例如，我們可以使用“let elms = document.querySelectorAll(‘:is(h1,p,script’)”獲取文檔中的所有H1、段落與腳本元素，並使用“console.table(elms)”將信息結論顯示爲表格。由於不同元素中包含大量屬性與特性，所以生成的表格仍然非常難以閱讀。這裏我們可以使用“console.table(elms,[‘nodeName’, ‘innerText’, ‘offsetHeight’])”進一步開展過濾，最終獲得一個只包含所需屬性及其值的表格。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c1\/c14b56d2227c422d1c4a75886821723b.png","alt":null,"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":"在複製和粘貼此信息時，表格結構將保持不變。這也讓此功能成爲將數據導入Excel或者Word的絕佳工具。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"靈活運用：$() and $$()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Console當中提供多種易於使用的便捷方法，被稱爲Console Utilitiers。其中兩個非常實用的代表就是“$()”與“$$()”，它們分別對應着“document.querySelector()”與“document.querySelectorAll()”。這些不僅能返回我們需要的nodeList，還會將結果轉換爲數組，因此可以直接在結果上使用“map()”與“filter()”。以下代碼就能獲取當前文檔內的所有鏈接並返回一個數組，其中的對象僅包含各鏈接的“href”與“innerText”屬性作爲“url”及“text”屬性。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"embedcomp","attrs":{"type":"table","data":{"content":"