I am trying to debug client side javascript on Safari on Big Sur.
Seems Webstorm will only spawn Chrome for debug sessions.
The bug I have is only evident in Safari.
Any pointers?
there are some solutions on this question: Is there a vue-devtools extension for Safari?
Either build the Vue devtools or install an Electron app for those, didn't even knew those existed!
Related
I don't know why "Debug JS Remotely" is not showing on iOS simulator
Versions:
・RN：v0.62.0
・OS:：macOS 10.15.3
・Xcode：11.3.1
Any solution??
With new react native versions, They have disabled hot reloading and live reloading with fast refresh and for your case Debug JS remotely has been changed to Start Debug. That will open up a browser in your system.
Hope it helps. feel free for doubts.
You're already debugging as you've turned on debug JS remotely(Start Debug newer version) ,open chrome and open inspect and tap on console ,you'll get the logs there, else to stop Just press on stop debugging to find debug JS remotely
Is there a React Development plugin for Opera ? The Opera (DragonFly) and Chrome Development Tools seem nearly identical. There seems to be no plugin for Opera that supports React Development. Is there perhaps a way to use the Chrome plugion for React in Opera considering they are nearly identical?
From the react-devtools README on github:
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).
Note that if you want to run it as an addon in Opera, you can run Chrome extensions in Opera. See: https://addons.opera.com/en/extensions/details/install-chrome-extensions/
You can install "Install chrome extensions" and then go to React Developer Tools page in chrome store and you'll see "Add to Opera" button
I built the chromium for android following these instructions https://code.google.com/p/chromium/wiki/AndroidBuildInstructions .
I got the content shell only not the full browser.
Then, I built the Firefox for Android. I successfully got the Full web browser. But the performance of the chrome content shell was much much better than that of Firefox Android build. Now, I want to try building the Firefox Android using chromium rendering Engine, Blink replacing the Gecko rendering Engine. How much is the difficulty level and how can I start.
Thanks,
Chromium uses Blink (earlier Webkit) as its rendering, and V8 for Javascript interpretation along with various 3rd party dependencies. Even though Content shell is a small browser (sans complex UI of Chromium) it is functional and a wrapper over Blink. Having said that fitting Blink with Firefox (instead of Gecko) will be a new project by itself, probably you can try building Webview, so that you can build a simple browser itself in android. http://developer.android.com/reference/android/webkit/WebView.html
Chromium - Open Source project
Chrome- Google's proprietary software + Chromium
In Android only Google Chrome can be installed as APK, wherease Chromium can be built as content shell or used through WebView
https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/zMDKC2x9o5w
I followed the steps to set up debugging webpage on iOS. It worked. However I see an issue with the inspector - it doesn't let me check the DOM and corresponding CSS. Anyone else has this issue? (Exact same issue when debugging using the simulator.)
Screenshot: http://screencast.com/t/E4fxPQwk14
Resource: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html
Thanks!
UPDATE: WebKit nightly works. Thank you Timothy Hatcher!
You need to use a WebKit nightly, Safari 6.1 or Mavericks to use Web Inspector with iOS 7.
If you don't have access to Mavericks, You can also use Chrome devtools via proxy.
Debug iOS 6+7 Mobile Safari using the Chrome DevTools
Also, is there a way to test those webapp in a webkit based browser such as chrome (with phonegap plug-in maybe) on a PC first before compiling it to test on a device or emulator?
The key reason is that trouble shooting mal-formed html, javascript code is very difficult on a device or emulator. You can not view the js console to see all error. The Weinre is great, but it can not spits out the error browser complains when initially loading the page.
It will be great if we can validate the html, js, css app first before diving deeper into testing on Android device. i.e. a way to weed out some simple problems before getting into more complicated deeper problems.
Any experience/suggestions/ideas/pointers are greatly appreciated.
Paul> Seems promising. Will try and report back. It seems knowledgeable in phoneGap mob dev. What are the key steps would you go through to dev a phoneGap mob web-app?
Ripple is a Chrome plug-in that includes a PhoneGap mode.
For JavaScript static validation, the PhoneGap Android Eclipse AppLaud plug-in includes a JSLint mode.
I would recommend you use Safari. In your Safari (on Mac) go to Settings (on PC) goto preferences -> Advanced -> check on "Show Develop in Menu bar".
Now you'll find in the Menu "Develop" "User Agent". There you can change the UserAgent identification, that will be send to the server. You can then change it to iPhone.
This way you can at least test it for iOS.
Hope that helps somewhat.