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
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.
Starting with MacOS 13.0 Ventura and Safari 16.1, developers can now build and distribute Extensions for Safari Web Inspector, just like they do with Safari as a whole through the App Store.
It is now hopefully a matter of time before Facebook or someone else builds and distributes React Dev Tools for Safari.
Reference: Adding a web development tool to Safari Web Inspector
Related
I have an automation test suite which includes the browser extension loading. I want to run these tests in gitlab but as far as I read, the headless chrome does not support the chrome extensions.
I can't use mozilla firefox as the extension is not supported by firefox. Please suggest me a way so that I can run my tests with the extension in gitlab CI.
Thanks in advance!
While looking for the solutions, I read about xvfb virtual display. I don't know what is it or will it work in gitlab. I tried but it did not work.
I created the build of a MERN Stack application using the npm run build command, then I ran this built application on my default browser (Microsoft Edge) using the npm start command. I then installed the react devtools extension for Edge from Chrome. But when I enable react devtools on my react app, it does not activate and I get the message This page doesn’t appear to be using React.
If this seems wrong, follow the troubleshooting instructions. I don't understand why I get this error because my application is entirely designed in react on the frontend side. I don't know if it's because I got the wrong server start command .
You can try the following solution.
In Edge, right click on React devtools, go to Manage extensions, and select "Allow access to file URLs".
Also, it has been reported that a re-installation of react devtools and a restart of browser may help. By the way, react devtools is available in Microsoft Edge Add-ons, so you can just install it in Edge (since you said you installed it from Chrome).
Updating Chrome to last version worked for me.
Chrome version: 109.0.5414.119 (Official Build) (64-bit)
System version: Ubuntu 20.04.2 LTS
For example this site opens on all browsers, this is simply a brand new create react project
https://pricecomparesite.netlify.com/
However these older projects only open in Chrome
https://robo-cards-with-search.netlify.com/
https://ecommercestorewithfirebase.netlify.com/
Strangely enough this one works
https://ordercustomburger.netlify.com/
This is the first day i am using Netlify, and of course my projects are working locally, i tried uploading both with the Netlify site and CLI, and i ran "npm i" & "npm run build" before upload. The robo-cards-with-search site was broken but following the advice of deleting node folder and changing react script version to 3.4 fixed it.
I suppose i uploaded the site correctly, else it wouldn't work on chrome and i followed all guidance i could find, but even google doesn't know what to do now.
It looks like you are having a redux devtools extension issue.
Read about the usage here on how to handle other browsers.
Currently you are using:
// Combine Middleware and Chrome Dev tools. Else it doesn't work
const middleWare = compose(applyMiddleware(thunkMiddleware, logger), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
Without being able to debug, it is hard to know where this might be failing on a browser that doesn't support the redux devtools.
I am creating a polymer element, which is not supporting in windows safari browser. It is showing error like this -
How to override this problem.
If you check Polymer's website you'll find that they support Safari 7+. And for windows if i'm correct 5 is the last version for Safari. So, you should not try Safari in windows for Web-components
I have a very small Ionic app I've been working on (just a couple angular routes/views). When I run it using "ionic serve", the app loads in my browser as expected. However, when I upload it using "ionic upload" and view it in the Ionic View app, it appears as though none of my javascript works, or my routes are not working.
How can I debug this issue? Are there build tools to detect errors or anything along those lines?
As #Keval says if you're running Android you can debug on-the-fly using Chrome
enable Developer options on your device (Settings > About, then find Build number and keep tapping it...yes really!)
In Developer options, enable USB debugging checkbox
plug in with a USB cable
run your app on the device.
At some point your device will then show a popup requiring you to accept debug commands from the remote computer, click Accept. If it doesn't appear the first time, unplug and replug usually fixes it
head to chrome://inspect in desktop Chrome, and click inspect under your device
A new Chrome window will open with all the juicy abilities you need - inspect code, set breakpoints, look at network speeds, access the console and so on
You can also do this on iOS via Safari http://developer.telerik.com/featured/a-concise-guide-to-remote-debugging-on-ios-android-and-windows-phone/
I had the same issue recently. The problem was that I stored my Ionic views NOT in /templates folder.
Please, check, maybe my answer will be useful for you.