Microsoft Edge中新的F12開發者工具

infoq發表於2015-05-04
ROS

　　微軟宣佈Microsoft Edge將成為新web瀏覽器的正式名稱，他將取代Internet Explorer 11的地位。Edge之前被稱為Project Spartan，它將努力爭取在現代web的舞臺上成為一個有力的競爭力。作為新瀏覽器計劃的一部分，Edge帶來了一個全功能的開發者工具體驗。來自微軟的Andy Sterland在Build 2015大會上介紹了Edge中新的F12開發者工具中的某些特性。

　　在Sterland的演講“Microsoft Edge[即原來所知的Project Spartan]中F12的新特性”，他介紹了微軟如何計劃與設計這個新工具，讓它能夠匹配新瀏覽器的強大能力。Sterland表示團隊將會專注於Microsoft Edge的開發，在Internet Explorer 11上的現有工具將會凍結開發狀態，不會繼續更新。

　　新的工具是由TypeScript所開發的，並且它始終保持在執行狀態，因此開發者在開啟工具之後無需重新載入整個頁面以試圖重建整個檢測結構。

　　新的工具在以下幾個方面得到了改進：

  1. 原始碼的導航能力改善 —— 可跳轉至定義，支援JavaScript和TypeScript
  2. 新工具會盡量保證在Edge中所使用的常見快捷鍵與Chrome相同，讓開發者在開發應用時能夠更容易地學習新的瀏覽器並隨意切換。
  3. 控制檯的改進
    1. 指出某個日誌訊息來自於原始碼中的哪一部分
    2. 使用Esc鍵開啟控制檯
    3. 訊息中的連結能夠點選（例如在原始碼或偵錯程式中顯示的URL）
  4. DOM瀏覽器的整合
    1. 元素高亮
    2. 從時間線中檢閱某個元素

　　在之前版本的工具中出現的指令碼分析器與UI可響應性工具將由一個新的聯合分析器（Combined Profiler）所取代。新的分析器中新增了一個具有時間線（HTML / CSS）的JavaScript呼叫棧功能。此外還新增了一個用於CPU取樣的新分析器。這個分析器會在一定的間隔時間內收集CPU的資料，而不是捕獲每次呼叫，因此它的資源佔用很低。

　　新的記憶體工具能夠對產生洩露的節點進行高亮，並且能夠結合DOM瀏覽器對DOM進行高亮。為了簡化這一操作，Edge加入了一個新的控制檯方法，能夠在開發者指定的時間獲取一份記憶體資料的快照，這樣就無需在執行應用時手動地捕獲記憶體快照了。

　　除了這些新的特性之外，Edge團隊仍然在繼續著他們的工作，以備將來進一步擴充套件這一工具的能力。Sterland暗示，團隊正在考慮加入以下一些實驗性的特性，等這些特性完成開發之後，將通過一個額外的實驗性標籤展現這些功能：

  1. JavaScript與CSS的編輯
  2. Cookie的檢閱
  3. 本地與會話儲存的管理

　　英文原文：New F12 Developer Tools for the New Microsoft Edge

相關文章