新的 React DevTools 發佈！

做者：Brian Vaughn

翻譯：瘋狂的技術宅

https://reactjs.org/blog/2019...

未經容許嚴禁轉載

咱們很高興地宣佈推出 React 開發者工具的新版本，如今能夠在 Chrome，Firefox和（Chromium）Edge 中使用！

有什麼變化？

第 4 版中發生了不少變化！從較高的層面來看，這個新版本應該能夠提供顯着的性能提高和改進的導航體驗。它還提供對 React Hooks 的徹底支持，包括檢查嵌套對象。

訪問互動教程試用新版本或參見更改日誌中的相關演示視頻和更多詳細信息。

支持哪些版本的 React？

react-dom

• 0-14.x: 不支持
• 15.x: 支持（新組件過濾器功能除外）
• 16.x: 支持

react-native

• 0-0.61: 不支持
• 0.62: 將要支持（當0.62發佈時）

如何得到新的 DevTools？

React DevTools 可做爲 Chrome 和 Firefox 的擴展程序提供。若是你已經安裝了擴展程序，則會在接下來的幾個小時內自動更新。

若是你使用獨立 shell（例如在 React Native 或 Safari 中），則能夠從 NPM 安裝新版本：

npm install -g react-devtools@^4

全部DOM元素都去了哪裏？

新的 DevTools 提供了一種從樹中過濾組件的方法，以便更輕鬆地導航嵌套的層次結構。主節點（例如HTML <div>，React Native <View>）默認是隱藏的，但能夠禁用此過濾器：

如何獲取舊版本？

若是你使用的是 React Native 60 版本（或更早版本），則能夠從 NPM 安裝之前版本的 DevTools：

npm install --dev react-devtools@^3

對於舊版本的 React DOM（v 0.14 或更早版本），你須要從源代碼構建擴展：

# Checkout the extension source
git clone https://github.com/facebook/react-devtools

cd react-devtools

# Install dependencies and build the unpacked extension
yarn install
yarn build:extension

# Follow the on-screen instructions to complete installation

謝謝！

咱們要感謝全部測試 DevTools v 4 早期版本的人。你的反饋有助於顯着改進此初始版本。

咱們仍然計劃開發許多使人興奮的功能，歡迎提供反饋！請打開 [GitHub issue]https://github.com/facebook/r...:Developer Tools) 或關注 Twitter 上的 @reactjs。

---

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

• 深刻理解Shadow DOM v1
• 一步步教你用 WebVR 實現虛擬現實遊戲
• 13個幫你提升開發效率的現代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工做的？從調用棧到Promise你須要知道的一切
• WebSocket實戰：在 Node 和 React 之間進行實時通訊
• 關於 Git 的 20 個面試題
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什麼？
• 30分鐘用Node.js構建一個API服務器
• Javascript的對象拷貝
• 程序員30歲前月薪達不到30K，該何去何從
• 14個最好的 JavaScript 數據可視化庫
• 8 個給前端的頂級 VS Code 擴展插件
• Node.js 多線程徹底指南
• 把HTML轉成PDF的4個方案及實現

---

• 更多文章...