Установить react developer tools в microsoft edge
We on the Microsoft Edge Developer Tools team have received a significant number of requests from customers looking to download the ReactJS browser dev tools extension from the Microsoft Edge extension store (in addition to its presence in the Chrome Web Store).
React version: All versions
Steps To Reproduce
- Navigate to https://microsoftedge.microsoft.com/addons/category/Edge-Extensions
- Click on "Developer Tools" category
Link to code example: N/A
The current behavior
No extension for ReactJS can be found.
The expected behavior
The ReactJS extension would be in the "Developer Tools" category.
The text was updated successfully, but these errors were encountered:
brendyna commented Feb 6, 2020
You bet! Thanks for the quick response.
The extension should work the same as in Chrome in the new Microsoft Edge given we're built on Chromium now (in fact, I tried installing the extension from the Chrome Web Store as a sanity check and it seems to work).
The ask from customers, as far as we can tell, is about ease of discovery in our store--so simply publishing it there should solve the problem. If you do run into issues, please do let us know and we can help figure out what's going on and how to fix it.
bvaughn commented Feb 9, 2020 •
Quick smoke test seems promising. Looks like even more advanced features like reload-and-profile and the "copy" context menu work (at least for Edge on Mac). Soon as I figure out if we have a shared Edge store account yet (or if we need to create a new one) I should be able to publish it.
leandroruel commented Feb 12, 2020
hey i'm very interested on it too, since now edge is chromium based and the dev tools is basically same as google chrome.
hmohamme commented Feb 14, 2020
Hi @bvaughn , I was already working on porting chrome extension to work with Microsoft edge (chromium) and came across this thread today. I have finished the work here and would love to send a pull request.
@brendyna I have submitted the extension for certification on Microsoft partner center as well.
bvaughn commented Feb 14, 2020
Sounds great, @hmohamme. Send us a PR~
The biggest blocker at the moment is on my end to just get a shared account with 2fa setup for our team.
brendyna commented Feb 14, 2020
@hmohamme and I chatted and we'll leave the extension certification, submission, and publishing up to y'all at Facebook/React (since it's important the team who primarily drives the extension owns the account used to publish it to the Edge store).
@bvaughn, let me know if you run into any issues getting that shared account setup. Happy to enlist our extension team if needed.
hmohamme commented Feb 14, 2020 •
bvaughn commented Feb 14, 2020
Thanks @brendyna. Agreed it's best for our team to setup and own the extension 😄 I'll let you know if we hit snags (other than the current one which is just my time 😅 )
bvaughn commented Feb 21, 2020
Hi @brendyna! I'm wondering if you might be able to point me in the right direction. I've been trying to get a developer account setup so that I can publish the React extension, but I can't seem to get verified:
There's no reason given, and the "Email support" link just takes me to a general FAQ page where there's nothing related that I can find. (The support chat has nothing about add-ons or developer accounts that I see.)
bvaughn commented Feb 24, 2020
Well I'm not sure what's going on at this point 😕
But the account I submitted it from seems to be in a weird state. I can log into it on account.microsoft.com, but when I open microsoftedge.microsoft.com/addons it shows me as signed out. Clicking "sign in" just redirects me to that same page (still signed out) without showing any login options.
Would really appreciate some guidance if you can provide any, @brendyna
brendyna commented Feb 24, 2020
Sorry for the delay on this, @bvaughn. We have an email going internally to help figure out what's going on here. Let me connect a few more dots and I'll follow-up soon. Thanks for your patience!
bvaughn commented Feb 24, 2020
No problem! Thank you for the update 🙇
bvaughn commented Feb 24, 2020
Secondary, much lower priority question: I'm curious why my fancy promo images (below) don't show up anywhere in the Edge Addons store? 😁
brendyna commented Feb 25, 2020
@bvaughn, to your second question--we have a Store refresh planned which will enable those graphics to show up. We're unable to share a specific ETA for that right now, but coming soon.
For the ingestion and validation issue, could you DM or email me the Seller ID and company name for the extension? I need those two data points to escalate this w/our extension team :)
bvaughn commented Feb 25, 2020
@bvaughn, to your second question--we have a Store refresh planned which will enable those graphics to show up. We're unable to share a specific ETA for that right now, but coming soon.
For the ingestion and validation issue, could you DM or email me the Seller ID and company name for the extension? I need those two data points to escalate this w/our extension team :)
Sure. Where should I DM you at? Your GitHub bio doesn't have contact info 😄
I'm @brian_d_vaughn on Twitter if you want to DM me there.
brendyna commented Feb 25, 2020
@bvaughn one follow-up: the extension is published, which seems great, but you're still not able to log into the developer portal with the account used to register it--is that correct?
bvaughn commented Feb 25, 2020
@brendyna That is correct. When I try, it auto redirects me to the add-ons store in a logged-out state. So I currently have an extension published that I have no way to manage or update 😄
bvaughn commented Feb 27, 2020
I think this can be closed out 😄 Thanks for your help!
bvaughn commented Feb 29, 2020
@brendyna It looks like it's pretty hard to actually find the React devtools extension on the Microsoft website.
That page doesn't even mention any extensions that I see.
brendyna commented Mar 2, 2020
@bvaughn, this is indeed a confusing experience we're working on.
The extension team is doing work on SEO to ensure that link and its sub pages show up higher than the old store, though I imagine that will take some time.
I hope that helps--and apologies again for the confusion. I'll pass this feedback along to our Extension Store team again.
React is an open-source JavaScript library for building front end user interfaces. Unlike other JavaScript libraries that provide a full application framework, React is focused solely on creating application views through encapsulated units called components that maintain state and generate UI elements. You can place an individual component on a web page or nest hierarchies of components to create a complex UI.
React components are typically written in JavaScript and JSX (JavaScript XML) which is a JavaScript extension that looks likes a lot like HTML, but has some syntax features that make it easier to do common tasks like registering event handlers for UI elements. A React component implements the render method, which returns the JSX representing the component's UI. In a web app, the JSX code returned by the component is translated into browser-compliant HTML rendered in the browser.
Does React work on Windows?
Yes. Windows supports two different environments for developing React apps:
For help determining which environment to use, check out Should I install on Windows or Windows Subsystem for Linux?
What can you do with React?
Windows supports a wide range of scenarios for React developers, including:
Basic web apps: If you are new to React and primarily interested in learning about building a basic web app with React, we recommend that you install create-react-app directly on Windows. If you're planning to create a web app that will be deployed for production, you may want to consider installing create-react-app on Windows Subsystem for Linux (WSL), for better performance speed, system call compatibility, and alignment between your local development environment and deployment environment (which is often a Linux server).
Single-Page Apps (SPAs): These are websites that interact with the user by dynamically rewriting the current web page with new data from a server, rather than the browser default of loading entire new pages. If you want to build a static content-oriented SPA website, we recommend installing Gatsby on WSL. If you want to build a server-rendered SPA website with a Node.js backend, we recommend installing Next.js on WSL. (Though Next.js now also offers static file serving).
Native desktop apps: React Native for Windows + macOS enables you to build native desktop applications with JavaScript that run across various types of desktop PCs, laptops, tablets, Xbox, and Mixed Reality devices. It supports both the Windows SDK and macOS SDK.
Native mobile apps: React Native is a cross-platform way to create Android and iOS apps with JavaScript that render to native platform UI code. There are two main ways to install React Native -- the Expo CLI and the React Native CLI. There's a good comparison of the two on StackOverflow. Expo has a client app for iOS and Android mobile devices for running and testing your apps. For instructions on developing an Android app using Windows, React Native, and the Expo CLI see React Native for Android development on Windows.
Installation options
There are several different ways to install React along with an integrated toolchain that best works for your use-case scenario. Here are a few of the most popular.
- Install create-react-app directly on Windows
- Install create-react-app on Windows Subsystem for Linux (WSL)
- Install the Next.js framework on WSL
- Install the Gatsby framework on WSL
- Install React Native for Windows desktop development
- Install React Native for Android development on Windows
- Install React Native for mobile development across platforms)
- Install React in the browser with no toolchain: Since React is a JavaScript library that is, in its most basic form, just a collection of text files, you can create React apps without installing any tools or libraries on your computer. You may only want to add a few "sprinkles of interactivity" to a web page and not need build tooling. You can add a React component by just adding a plain tag on an HTML page. Follow the "Add React in One Minute" steps in the React docs.
React tools
While writing a simple React component in a plain text editor is a good introduction to React, code generated this way is bulky, difficult to maintain and deploy, and slow. There are some common tasks production apps will need to perform. These tasks are handled by other JavaScript frameworks that are taken by the app as a dependency. These tasks include:
- Compilation - JSX is the language commonly used for React apps, but browsers can't process this syntax directly. Instead, the code needs to be compiled into standard JavaScript syntax and customized for different browsers. Babel is an example of a compiler that supports JSX.
- Bundling - Since performance is key for modern web apps, it's important that an app's JavaScript includes only the needed code for the app and combined into as few files as possible. A bundler, such as webpack performs this task for you.
- Package management - Package managers make it easy to include the functionality of third-party packages in your app, including updating them and managing dependencies. Commonly used package managers include Yarn and npm.
Together, the suite of frameworks that help you create, build, and deploy your app are called a toolchain. An easy toolchain to get started with is create-react-app, which generates a simple one-page app for you. The only setup required to use create-react-app is Node.js.
- For Windows development, follow the instructions to install Node.js on WSL or install Node.js on Windows. For help deciding which to use, check out the article: Should I install on Windows or Windows Subsystem for Linux?.
React Native component directory
The components that can be used in a React Native app include the following:
- Core components - Components that are developed and supported as part of the React Native framework.
- Community components - Components that are developed and maintained by the community.
- Native components - Components that you author yourself, using platform-native code, and register to be accessible from React Native.
The React Native Directory provides a list of component libraries that can be filtered by target platform.
Fullstack React toolchain options
React is a library, not a framework, so may require additional tools to create a more complex app. In addition to using React, you may want to consider using:
React — это библиотека JavaScript с открытым кодом для создания внешних пользовательских интерфейсов. В отличие от других библиотек JavaScript, предоставляющих полноценную платформу приложений, React ориентируется исключительно на создание представлений приложений через инкапсулированные единицы (называются компонентами), которые сохраняют состояние и генерируют элементы пользовательского интерфейса. Вы можете разместить отдельный компонент на веб-странице или вложить иерархии компонентов для создания сложного пользовательского интерфейса.
Компоненты React часто пишутся на JavaScript и JSX (JavaScript XML), который является расширением JavaScript, очень похожим на HTML и включающим некоторые функции синтаксиса для оптимизированного выполнения распространенных задач, например регистрации обработчиков событий для элементов пользовательского интерфейса. Компонент React реализует метод отрисовки, который возвращает код JSX, представляющий пользовательский интерфейс компонента. В веб-приложении код JSX, возвращаемый компонентом, преобразуется в поддерживаемый браузером код HTML, который затем обрабатывается для отображения браузером.
Работает ли React в Windows?
Да. Windows поддерживает две разных среды для разработки приложений React:
Чтобы понять, какую среду использовать, ознакомьтесь со статьей Выбор между установкой в Windows и подсистеме Windows для Linux.
Что можно делать с помощью React?
Windows поддерживает широкий спектр сценариев для разработчиков React, в том числе следующие:
Базовые веб-приложения. Если вы не знакомы с React и в основном хотите узнать, как создать базовое веб-приложение с помощью React, мы рекомендуем установить create-react-app непосредственно в Windows. Если вы планируете создать веб-приложение, которое будет развернуто для рабочей среды, рекомендуем установить create-react-appcreate-react-app в подсистеме Windows для Linux (WSL), что позволит обеспечить повышенную производительность, совместимость системных вызовов и согласованность между локальной средой разработки и средой развертывания (в качестве которой часто используется сервер Linux).
Одностраничные приложения. Это веб-сайты, которые взаимодействуют с пользователем, динамически перезаписывая текущую веб-страницу с помощью новых данных с сервера (в отличие от поведения браузера по умолчанию с загрузкой целых новых страниц). Если вы хотите создать статический веб-сайт с ориентированным на содержимое одностраничным приложением, мы рекомендуем установить Gatsby в WSL. Если вы хотите создать веб-сайт с одностраничным приложением, которое отрисовывается на сервере, и серверной частью на Node.js, мы рекомендуем установить Next.js в WSL. (Хотя Next.js теперь также предлагает возможности по обработке статических файлов.)
Собственные классические приложения.React Native для Windows и macOS позволяет создавать собственные классические приложения с помощью JavaScript, которые выполняются на различных настольных компьютерах, ноутбуках, планшетах, устройствах Xbox и смешанной реальности. Он поддерживает как Windows SDK, так и macOS SDK.
Собственные мобильные приложения.React Native — это кросс-платформенное средство для создания приложений Android и iOS с помощью JavaScript, которые передают данные для отрисовки в собственный код пользовательского интерфейса платформы. React Native можно установить двумя способами: с помощью Expo CLI или React Native CLI. Вы можете изучить подробное сравнение двух этих средств на StackOverflow. Expo предоставляет клиентское приложение для мобильных устройств iOS и Android, позволяющее запускать и тестировать приложения. Инструкции по разработке приложения Android с помощью Windows, React Native и Expo CLI см. в статье React Native для разработки приложений Android в Windows.
Варианты установки
Существует несколько разных способов для установки React вместе с интегрированной цепочкой инструментов, лучше всего подходящими для вашего сценария использования. Ниже приведены самые популярные из них.
- Установка create-react-app непосредственно в Windows
- Установка create-react-app в подсистеме Windows для Linux (WSL)
- Установка платформы Next.js в WSL
- Установка платформы Gatsby в WSL
- Установка React Native для разработки классических приложений Windows
- Установка React Native для разработки приложений Android в Windows
- Установка React Native для разработки мобильных приложений на разных платформах )
- Установка React в браузере без цепочки инструментов : так как React является библиотекой JavaScript, то есть по сути набором текстовых файлов, вы можете создавать приложения React без установки каких-либо средств или библиотек на своем компьютере. Возможно, вы хотите только немного расширить интерактивные возможности веб-страницы и вам не требуется инструментарий для сборки. Вы можете добавить компонент React, всего лишь указав простой тег на HTML-странице. Выполните инструкции по быстрому добавлению React из документации по React.
Средства React
Хотя написание простого компонента React в редакторе обычного текста — это хороший способ начать изучение React, созданный таким способом код будет громоздким и медленным, а также сложным в обслуживании и развертывании. Приложения в рабочей среде должны выполнять некоторые распространенные задачи. Такие задачи обрабатываются другими платформами JavaScript, которые принимаются приложением как зависимость. Ниже перечислены эти задачи.
- Компиляция. JSX — это язык, который часто используется для приложений React, но браузеры не могут обрабатывать его синтаксис напрямую. Код нужно скомпилировать в стандартный синтаксис JavaScript и адаптировать под разные браузеры. Babel — это один из компиляторов, которые поддерживают JSX.
- Упаковка. Так как производительность очень важна для современных веб-приложений, в идеале код JavaScript приложения должен включать только код самого приложения в наименьшем числе файлов. Средство упаковки, например webpack, выполняет эту задачу за вас.
- Управление пакетами. Диспетчеры пакетов упрощают включение функциональности сторонних пакетов в ваше приложение, в том числе их обновление и управление зависимостями. Популярные диспетчеры пакетов — это Yarn и npm.
В целом набор платформ, которые помогают создавать, компилировать и развертывать приложение, называются цепочкой инструментов. create-react-app — это удобная цепочка инструментов, позволяющая создать простое одностраничное приложение. Единственной средой, требующей использования create-react-app, является Node.js.
- Для разработки в Windows выполните инструкции по установке Node.js в WSL или Windows. Чтобы понять, какую среду использовать, изучите статью Выбор между установкой в Windows и подсистеме Windows для Linux.
Каталог компонентов React Native
Ниже приведены компоненты, которые можно использовать в приложении React Native:
Каталог React Native предоставляет список библиотек компонентов, который можно отфильтровать по целевой платформе.
Варианты цепочки инструментов Fullstack React
React — это библиотека, а не платформа, поэтому для создания более сложных приложений могут потребоваться дополнительные инструменты. Вместе с React вы можете использовать такие средства:
- Диспетчер пакетов — с React используются два популярных диспетчера пакетов: npm (включен в Node.js) и Yarn. Оба из них поддерживают широкую библиотеку пакетов для установки. — набор навигационных компонентов, которые упрощают создание добавляемых в закладки URL-адресов для веб-приложения или составной навигации в React Native. React осуществляет только управление состояниями и отображении этих состояний в модели DOM, поэтому при создании приложений React обычно требуется использовать библиотеку маршрутизации, например React Router. — контейнер прогнозируемых состояний, который упрощает работу с архитектурой потоков данных. Как правило, он понадобится вам только в том случае, если вы находитесь на продвинутом этапе разработки React. Как сказал Дэн Абрамов (Dan Abramov), один из создателей Redux: "Redux не нужен, пока у вас нет проблем с обычным React". — средство сборки, которое позволяет компилировать модули JavaScript. Также называется упаковщиком модулей. Когда webpack обрабатывает ваше приложение, внутренне он создает граф зависимостей, который сопоставляет каждый нужный вашему проекту модуль, и создает один или несколько пакетов. — набор средств на JavaScript для синтаксического анализа, минификации, сжатия и форматирования кода. — компилятор JavaScript, в основном используемый для преобразования кода ECMAScript 2015+ в обратно совместимую версию JavaScript в существующих и старых браузерах или средах. Вам также может понадобиться предустановка babel-preset-env, которая устраняет необходимость в отслеживании каждого синтаксического преобразования или полизаполнения в браузере и может определять поддерживаемые браузеры. — средство для поиска шаблонов в вашем коде JavaScript и информирования о них, что позволяет вам сделать код более согласованным и избежать ошибок. — программа тестирования на JavaScript для React, которая упрощает тестирование выходных данных компонентов React. — платформа тестирования, встроенная в create-react-app, которая упрощает написание идиоматических тестов JavaScript. — платформа тестирования, которая работает на Node.js и в браузере и упрощает асинхронное тестирование, создание отчетов и подбор сценариев тестирования для невыявленных исключений.
Курсы и учебники по React
Ниже приведены некоторые рекомендуемые ресурсы для изучения React и создания примеров приложений:
React Developer Tools
React Developer Tools lets you inspect the React component hierarchy, including component props and state.
It exists both as a browser extension (for Chrome and Firefox), and as a standalone app (works with other environments including Safari, IE, and React Native).
The official extensions represent the current stable release.
The extension icon will light up on the websites using React:
On such websites, you will see a tab called React in Chrome Developer Tools:
A quick way to bring up the DevTools is to right-click on the page and press Inspect.
- Arrow keys or hjkl for navigation
- Right click a component to show in elements pane, scroll into view, show source, etc.
- Differently-colored collapser means the component has state/context
- Right-click to store as global variable
- Updates are highlighted
- Use the search bar to find components by name
Finding Component by a DOM Node
If you inspect a React element on the page using the regular Elements tab, then switch over to the React tab, that element will be automatically selected in the React tree.
Finding DOM Node by a Component
You can right-click any React element in the React tab, and choose "Find the DOM node". This will bring you to the corresponding DOM node in the Elements tab.
Displaying Element Source
You may include the transform-react-jsx-source Babel plugin to see the source file and line number of React elements. This information appears in the bottom of the right panel when available. Don't forget to disable it in production! (Tip: if you use Create React App it is already enabled in development.)
Usage with React Native and Safari
There is a standalone version that works with other environments such as React Native and Safari.
The React Tab Doesn't Show Up
If you are running your app from a local file:// URL, don't forget to check "Allow access to file URLs" on the Chrome Extensions settings page. You can find it by opening Settings > Extensions:
The React tab won't show up if the site doesn't use React, or if React can't communicate with the devtools. When the page loads, the devtools sets a global named __REACT_DEVTOOLS_GLOBAL_HOOK__ , then React communicates with that hook during initialization. You can test this on the React website or by inspecting Facebook.
If your app is inside of CodePen, make sure you are registered. Then press Fork (if it's not your pen), and then choose Change View > Debug. The Debug view is inspectable with DevTools because it doesn't use an iframe.
If your app is inside an iframe, a Chrome extension, React Native, or in another unusual environment, try the standalone version instead. Chrome apps are currently not inspectable.
If you still have issues please report them. Don't forget to specify your OS, browser version, extension version, and the exact instructions to reproduce the issue with a screenshot.
Does "Highlight Updates" trace renders?
With React 15 and earlier, "Highlight Updates" had false positives and highlighted more components than were actually re-rendering.
Since React 16, it correctly highlights only components that were re-rendered.
For changes that don't directly involve Chrome/Firefox/etc. APIs, there is a "plain" shell that just renders the devtools into an html page along with a TodoMVC test app. This is by far the quickest way to develop. Check out the Readme.md in /shells/plain for info.
For other shells (Chrome, Firefox, etc.), see the respective directories in /shells .
For a list of good contribution opportunities, check the good first bug label. We're happy to answer any questions on those issues!
To read more about the community and guidelines for submitting pull requests, please read the Contributing document.
We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!
A lot has changed in version 4! At a high level, this new version should offer significant performance gains and an improved navigation experience. It also offers full support for React Hooks, including inspecting nested objects.
Visit the interactive tutorial to try out the new version or see the changelog for demo videos and more details.
Which versions of React are supported?
react-dom
- 0 - 14.x : Not supported
- 15.x : Supported (except for the new component filters feature)
- 16.x : Supported
react-native
- 0 - 0.61.x : Not supported
- 0.62 : Supported
How do I get the new DevTools?
React DevTools is available as an extension for Chrome and Firefox. If you have already installed the extension, it should update automatically within the next couple of hours.
If you use the standalone shell (e.g. in React Native or Safari), you can install the new version from NPM:
Where did all of the DOM elements go?
The new DevTools provides a way to filter components from the tree to make it easier to navigate deeply nested hierarchies. Host nodes (e.g. HTML , React Native ) are hidden by default, but this filter can be disabled:
How do I get the old version back?
If you are working with React Native version 60 (or older) you can install the previous release of DevTools from NPM:
For older versions of React DOM (v0.14 or earlier) you will need to build the extension from source:
We’d like to thank everyone who tested the early release of DevTools version 4. Your feedback helped improve this initial release significantly.
We still have many exciting features planned and feedback is always welcome! Please feel free to open a GitHub issue or tag @reactjs on Twitter.
Читайте также: