Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

I want to add react devtools to Safari browser

I want to add react devtools to Safari browser I didn't find a way to install it

I want to see the react sign on the websites made by react

Thank you

like image 617
Bishoy Abdelmesseh Avatar asked Dec 19 '20 18:12

Bishoy Abdelmesseh


People also ask

Does Safari have React dev tools?

React-devtools is a standalone package that runs independently. The chrome extension hooks it up for convenience in chrome. Safari doesn't have an extension right now (legacy reasons).

How do I use React Devtools?

You can click the eye icon in the Developer Tools toolbar to inspect the DOM element, and also if you use the first icon, the one with the mouse icon (which conveniently sits under the similar regular DevTools icon), you can hover an element in the browser UI to directly select the React component that renders it.

Is there a react-DevTools extension for Safari?

React-devtools is a standalone package that runs independently. The chrome extension hooks it up for convenience in chrome. Safari doesn't have an extension right now (legacy reasons). If you really need to hook it up, it should not be hard to port it to safari since it's API's are now supposedly as open and similar as chrome's.

How to open browser developer tools in React Native?

Right-click anywhere in the browser window and click on Inspect. Additionally, you can open it by pressing F12. This will open browser developer tools with all the usual tabs like Elements, Console, etc. Because we installed React dev tools extension. We get access to 2 new tabs:

Do you prefer chrome or Safari for react development?

I actually prefer Safari, started when it was way faster than Chrome on a mac and stuck with it. The only shortcoming I've run into is the lack of React devtools. Chrome has been my browser of choice for years, but our app supports Safari, and I'm interested in seeing what the experience is like for day-to-day use ¯_ (ツ)_/¯

How do I update ReACT-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: npm install -g react-devtools@^4.


1 Answers

I think what you are looking for is the react-devtools chrome extension?
React-devtools is a standalone package that runs independently.
The chrome extension hooks it up for convenience in chrome.

Safari doesn't have an extension right now (legacy reasons). If you really need to hook it up, it should not be hard to port it to safari since it's API's are now supposedly as open and similar as chrome's.

like image 190
kunl Avatar answered Nov 15 '22 04:11

kunl