Перейти к содержимому

React devtools backend js что это

  • автор:

Инструменты разработчика React

Используйте инструменты разработчика React для инспектирования компонентов React, редактирования пропсов и состояния, а также выявления проблем с производительностью.

Содержание туториала по React Используйте инструменты разработчика React для инспектирования компонентов React, редактирования пропсов и состояния, а также выявления проблем с производительностью.

Расширение для браузера

  • Установить для Chrome
  • Установить для Firefox
  • Установить для Edge

Safari и другие браузеры

Для других браузеров (например, Safari) установите npm-пакет react-devtools :

# Yarn yarn global add react-devtools # Npm npm install -g react-devtools


Затем откройте инструменты разработчика из терминала:


react-devtools


Затем подключите свой веб-сайт, добавив следующий тег в начало вашего веб-сайта:


Перезагрузите свой веб-сайт в браузере, чтобы просмотреть его в инструментах разработчика.


Мобильный (React Native)


Инструменты разработчика React также можно использовать для проверки приложений, созданных с помощью React Native. Самый простой способ использовать React Developer Tools — установить его глобально:


# Yarn yarn global add react-devtools # Npm npm install -g react-devtools


Затем откройте инструменты разработчика из терминала.


react-devtools


Он должен подключаться к любому локальному приложению React Native, которое запущено. Попробуйте перезагрузить приложение, если инструменты разработчика не подключаются через несколько секунд.


Рендеринг и фиксация в React




4 месяца назад · 1 мин. на чтение


Прежде чем ваши компоненты отобразятся на экране, они должны быть обработаны React. Понимание шагов этого процесса поможет вам понять, как выполняется ваш код, и объяснить его поведение.


    

  1. Запуск рендера (доставка заказа гостя на кухню)
    2. 

  2. Рендер компонента (подготовка заказа на кухне)
    3. 

  3. Фиксация (commit) в DOM (размещение заказа на столе)
    4. 



Шаг 1. Запуск рендеринга


    

  • Это начальный рендер компонента.
    • 

  • Состояние компонента (или одного из его предков) было обновлено.
    • 



Начальный рендер


Когда ваше приложение запускается, вам нужно запустить первоначальный рендеринг. Фреймворки и песочницы иногда скрывают этот код, но это делается путем вызова createRoot с целевым узлом DOM, а затем вызова его метода рендеринга с вашим компонентом:


// index.js import Image from './Image.js'; import < createRoot >from 'react-dom/client'; const root = createRoot(document.getElementById('root')); root.render();


// Image.js export default function Image() < return image; >


Рендеринг при обновлении состояния


После первоначального рендеринга компонента вы можете запускать дальнейшие рендеры, обновляя его состояние с помощью функции set . Обновление состояния вашего компонента автоматически ставит рендеринг в очередь. (Вы можете представить это как гостя ресторана, который заказывает чай, десерт и другие блюда, после того как сделал свой первый заказ, в зависимости от состояния жажды или голода.)


Шаг 2: React визуализирует ваши компоненты


    

  • При первоначальном рендеринге React вызовет корневой компонент.
    • 

  • Для последующих рендеров React будет вызывать функциональный компонент, обновление состояния которого инициировало рендеринг.
    • 



// Gallery.js export default function Gallery() < return ( 
Inspiring Sculptures
   
 ); > function Image() < return image; >


// index.js import Gallery from './Gallery.js'; import < createRoot >from 'react-dom/client'; const root = createRoot(document.getElementById('root')); root.render();


    

  • Во время первоначального рендеринга React создаст узлы DOM для тегов , и трех тегов .
    • 

  • Во время повторного рендеринга React вычислит, какие из их пропсов, если таковые имеются, изменились с момента предыдущего рендеринга. Он ничего не будет делать с этой информацией до следующего шага, фазы фиксации.
    • 



 Рендеринг всегда должен быть чистым: 


    

  • При тех же входах, тот же выход. При одинаковых входных данных компонент всегда должен возвращать один и тот же JSX. (Когда кто-то заказывает салат с помидорами, он не должен получать салат с луком.)
    • 

  • Он думает только о своих делах. Он не должен изменять какие-либо объекты или переменные, существовавшие до рендеринга. (Один заказ не должен изменять чей-либо другой заказ.)
    • 



 В противном случае вы можете столкнуться с запутанными ошибками и непредсказуемым поведением по мере усложнения вашей кодовой базы. При разработке в «строгом режиме» React дважды вызывает функцию каждого компонента, что может помочь обнаружить ошибки, вызванные нечистыми функциями.


Оптимизация производительности


Поведение рендеринга по умолчанию всех компонентов, вложенных в обновленный компонент, не является оптимальным для производительности, если обновленный компонент находится очень высоко в дереве. Если вы столкнулись с проблемой производительности, существует несколько способов ее решения, описанных в разделе «Производительность». Не оптимизируйте преждевременно.


Шаг 3: React фиксирует изменения в DOM


    

  • Для начального рендеринга React будет использовать DOM API appendChild() для размещения на экране всех созданных DOM-узлов.
    • 

  • Для повторного рендеринга React применит минимально необходимые операции (рассчитанные во время рендеринга), чтобы привести DOM в соответствие с последним результатом рендеринга.
    • 



// Clock.js export default function Clock(< time >) < return ( <>   ); >


Это работает, потому что на этом последнем шаге React только обновляет содержимое новым значением времени. Он видит, что появляется в JSX в том же месте, что и в прошлый раз, поэтому React не касается или его значения.


Отрисовка браузером


После того, как рендеринг завершен и React обновил DOM, браузер перерисует экран. Хотя этот процесс известен как "рендеринг в браузере", мы будем называть его "отрисовкой", чтобы избежать путаницы в остальной части этого руководства.


Резюме


    

  • Запуск
    • 

  • Рендеринг
    • 

  • Фиксация
    • 



React devtools backend js что это




React Developer Tools - это дополнение к браузеру Google Chrome от компании Фэйсбук, которое служит очень полезным инструментом при работе с React. Дополнение создает еще одну вкладку (React) в Инструментах разработчика (Ctrl+Shift+I), позволяющую произвести инспекцию всего реакт-приложения, включая компоненты, а также их свойства и состояния (state, props).




    

  • Frontend
    • 

  • Инструмент разработчика React Developer Tools
    • 



© 2024 Инструкции по созданию сайтов


Расширение DevTools


Electron supports Chrome DevTools extensions, which can be used to extend the ability of Chrome's developer tools for debugging popular web frameworks.


Loading a DevTools extension with tooling​


The easiest way to load a DevTools extension is to use third-party tooling to automate the process for you. electron-devtools-installer is a popular NPM package that does just that.


Manually loading a DevTools extension​


If you don't want to use the tooling approach, you can also do all of the necessary operations by hand. To load an extension in Electron, you need to download it via Chrome, locate its filesystem path, and then load it into your Session by calling the ses.loadExtension API.


Using the React Developer Tools as an example:


    

  1. Install the extension in Google Chrome.
    2. 

  2. Перейдите chrome://extensions и найдите его идентификатор расширения, который является хешем строка как fmkadmapgofadopljbjfkapdkoienihi .
    3. 

  3. Find out the filesystem location used by Chrome for storing extensions:

      

    • в Windows it is %LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions ;
      • 

    • в Linux это может быть:

        

      • ~/.config/google-chrome/Default/Extensions/
        • 

      • ~/.config/google-chrome-beta/Default/Extensions/
        • 

      • ~/.config/google-chrome-canary/Default/Extensions/
        • 

      • ~/.config/chromium/Default/Extensions/
        • 

      

      • 

    • в macOS это ~/Library/Application Support/Google/Chrome/Default/Extensions .
      • 

    

    4. 

  4. Передайте местоположение расширения в ses.loadExtension API. For React Developer Tools v4.9.0 , it looks something like:
    



const  app, session > = require('electron') const path = require('node:path') const os = require('node:os')  // on macOS const reactDevToolsPath = path.join(  os.homedir(), '/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.9.0_0' ) app.whenReady().then(async () =>   await session.defaultSession.loadExtension(reactDevToolsPath) >) 


Примечания:


    

  • loadExtension returns a Promise with an Extension object, which contains metadata about the extension that was loaded. This promise needs to resolve (e.g. with an await expression) before loading a page. Otherwise, the extension won't be guaranteed to load.
    • 

  • loadExtension cannot be called before the ready event of the app module is emitted, nor can it be called on in-memory (non-persistent) sessions.
    • 

  • loadExtension must be called on every boot of your app if you want the extension to be loaded.
    • 



Removing a DevTools extension​


You can pass the extension's ID to the ses.removeExtension API to remove it from your Session. Loaded extensions are not persisted between app launches.


DevTools extension support​


Electron only supports a limited set of chrome.* APIs, so extensions using unsupported chrome.* APIs under the hood may not work.


The following Devtools extensions have been tested to work in Electron:


    

  • Ember Inspector
    • 

  • React Developer Tools
    • 

  • Backbone Debugger
    • 

  • jQuery Debugger
    • 

  • AngularJS Batarang
    • 

  • Vue.js devtools
    • 

  • Cerebral Debugger
    • 

  • Redux DevTools Extension
    • 

  • MobX Developer Tools
    • 



What should I do if a DevTools extension is not working?​


First, please make sure the extension is still being maintained and is compatible with the latest version of Google Chrome. We cannot provide additional support for unsupported extensions.


If the extension works on Chrome but not on Electron, file a bug in Electron's issue tracker and describe which part of the extension is not working as expected.


Saved searches


Use saved searches to filter your results more quickly


Cancel Create saved search


You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.


 facebook / react  Public


Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.


By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.


Already on GitHub? Sign in to your account


How to replace "react devtools backend.js:4049" with the actual file origin of console log #22284


jakepante21 opened this issue Sep 9, 2021 · 1 comment


 How to replace "react devtools backend.js:4049" with the actual file origin of console log #22284


jakepante21 opened this issue Sep 9, 2021 · 1 comment


Comments


jakepante21  commented Sep 9, 2021 •


So I'm trying to debug my code using console.log() , originally, besides the console log it shows where the log is from (like the file name and line where the console log appears). Then suddenly it stopped showing the file name, instead it just shows "react devtools backend.js:4049", and it's confusing. Thank you.


Here's a sample screenshot:


devtools


The text was updated successfully, but these errors were encountered:





Похожие публикации:
    

  1. Cyberlink medialibrary service в автозагрузке что это
    2. 

  2. Ovu412000 00 что это такое
    3. 

  3. Вероятность того что событие не произойдет
    4. 

  4. Сколько байт в слове процессор
    5.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *