VScode on Mac - launch safari debug - visual-studio-code

I've been looking for a launch.json config to launch safari with a url from my mac for debugging. I can't seem to locate a way to launch the safari browser and open a url link.
I looked for some extensions, saw the older IOS debugger one and saw some preview in browser extension options. I'm not sure if its possible. I haven't stumbled across a something on the web yet. I'm working with SFCC and a specific safari browser issue.
In the meantime I will try prophet debugger and setting up a default browser of safari on the mac.
Thanks

Related

How can I debug a Flutter Web App on Safari using the inspector?

I am using flutter to write a simple app, everything works fine on Android, iOS, and Chrome. (I've also tested on Firefox & Brave Browser, all's well).
However, on Safari (Mac & iOS), the flutter app gets stuck on the index.html file and does not load the PWA.
The error from the console on Safari Inspect
How can I know what the anonymous function in js_helper is, or what main.dart.js:57063 refers to?
Is there any way of building for web without minifying?
Has anybody encountered a scenario where everything works on all platforms except Safari?
Flutter Doctor
Log from console when running on local server
debug for safari is not supported yet
but for anyone with the same problem you could solve it by running the app on release mode
flutter run -d chrome --release
after that open with the same port on safari and everything should be fine
You won't be able to debug it directly on Safari, but if you just want to test your app in safari with localHost, you can use these steps :
Enable 'developer' menu in Safari from settings of Safari :
Then check on 'Disable Cross-Origin restrictions"
Now after running release version of web app in chrome, use same app's address in Safari, you will be able to test it. Ex. http://localhost:51155/
to run in release mode : flutter run -d chrome --release
Hope this helps!

Where are chrome apps file located on a Chromebook?

I installed a chrome app on my Pixelbook which has dev mode enabled. I'm trying to find where app is physically installed. Where can I find it?
Tried looking around the web and don't seem to find an answer.

How to use chrome remote debugging with ionic framework?

So I'm reading in this link and it says we can use chrome for remote debugging an app which seeems great but they don't explain how to do it. When I click in the link they provide which has some android documentation, I just see java code. As a non java-developer I wonder how can I use remote debugger in chrome for ionic framework?
To access remote debugging of a webview on your phone, plug your phone into your pc and go to chrome. then type: chrome://inspect into the url bar. open your app on your phone and it should show your device on the inspect dashboard.

Get error messages Chrome packaged app

How can I see error messages when running a Chrome packaged app? I've been running the app in the browser and using DevTools but this technique has it's limitations.
If you need to inspect app windows, you can reach them at chrome://inspect/#apps
Or, as Daniel mentions, use the Developer Tool app.
General Chrome Debugging
By opening
chrome://inspect/#apps
you may debug all Apps and Extensions.
You may also like the official Google Chrome Apps & Extensions Developer Tool
Debugging Chrome Extensions
As described in the chrome developer Tutorial you can activate the developer mode within the settings. Afterwards an inspect popup option is avaialbe when you right-click an app-icon.

Troubleshoot Android 4.3 webview within an app that requires up-to-date Google Play services

I need to troubleshoot an issue happening in a webview running within my app. This issue only occurs on Android versions lower or equal to 4.3. My app requires an up to date version of Google Play services.
In order to troubleshoot my webview, I usually can run my app under the Android Emulator (with the latest version of Android), then connect to the web view via Chrome (using chrome://inspect) - the web view appears in Chrome and I'm able to browse the DOM and debug.
To run the app under 4.3, I've created (under AVD) a new device from an existing device definition,
then picked the target Google APIs (Google Inc.) - API Level 18. I've then installed my app, but when trying to run it, I get the error message "This app won't run unless you update Google Play services.". There's an "Update" button on the previous dialog, but nothing happen when clicking on it.
I then tried to debug my issue using Genymotion. I've created a device under 4.3, followed these instructions to flash my device with the latest Google Play services and installed my app. I can now run the app and reproduce the issue within this simulated environment.
The trick now is to be able to connect to the web view from my local Chrome browser. I've enabled remote debugging as described here. Now my device appears in Chrome, but the web view is not showing up in the inspector. Similarly, if I open a new tab under the native browser, it won't show up in the remote inspector. If I open a new tab under Android Chrome though, I can see it showing up under my remote Chrome inspector.
I can see two way moving forward and successfully accessing to the DOM of my webview:
Fixing the "Update" issue under the Android Emulator running 4.3
Or
Connecting to my web view from my Chrome inspector while running the app under Genymotion
Any idea on how to solve one of these two problems?
I have been using weinre for sometimes. it's a pretty good tool to debug webview for android 4.3 and lower. It provides almost same interface as chrome debugger.
All you need to do are:
Install weinre
sudo npm -g install weinre
Client side:
Insert the following code to your webpage <head> section.
Note: it's better to put it at end of <head> section, otherwise there will be some strange errors and debugger won't show up.
<script src="http://<your server ip here>:8081/target/target-script-min.js"></script>
Server side
weinre --boundHost -all- --httpPort 8081
Debugger
open the debugger tool from weinre from your desktop browser:
http://localhost:8081/client/
Finally,
select any target in Targets part and then start debugging.
Remote debugging web views only works on devices with android 4.4 and above.
have a look at this :
https://developer.chrome.com/devtools/docs/remote-debugging