Chrome dev tools completely blank & unresponsive High Sierra - macos

For about a week, Chrome dev tools has been completely blank every time I try to use it on my Mac (screenshot). I have reinstalled it but to no avail. Once I open dev tools, the specific tab seems to break - I have to open a new tab to be able to navigate, and none of the dev tools tabs & buttons work, so I cannot use any of the suggestions included here:
Chrome dev tools console completely blank
I am using High Sierra 10.13.2 & chrome Version 63.0.3239.132 (64-bit)
Any tips would be greatly appreciated

Download Chrome Canary and see if the problem is fixed when you run the latest Chrome code. If it's fixed, then there was just some temporary regression that's causing Chrome to break.
If the issue is still there when you run Canary, file a bug!

Related

Packages PKG Mac Installation builder Presentation Tab Doesn't Load

I am using the Packages software to build my application into a pkg file for installation on other Macs. I've used it before on my old MacBook and it worked great. I am trying it on my new Mac and I cannot view the Presentation Tab. Whenever I click the Presentation Tab under Project, the screen stays the same as the prior tab I was on. So I can't configure the Presentation. Has anyone else had this problem? I've reinstalled Packages and still no change. I'm not sure if my configurations are wrong or what's going on. I'm running Ventura 13.0.1 on my MacBook.
I'm including a screenshot that shows the Presentation Tab is active, but the Settings tab is still visible (that's the tab I switched from).
I'd love some help, I really want to configure the presentation. Thanks.
I had the same problem and got in touch with the Packages dev team. They provided this link to dev build, which fixes this issue now. I suppose in the next release it is going to be fixed.
http://s.sudre.free.fr/files/Packages_1211_dev.dmg

Nativescript 7 and Chrome DevTools

I have updated my app to Nativescript 7. One thing I haven't been able to get to work correctly is debugging using Chrome Dev Tools. It does use the Chrome Dev Tools console, but I can't seem to get the Network tab to work or the Elements tab. Has anyone else managed to get it to work?
My app uses Angular 10 and Nativescript 7.
I believe they fixed this in a recent update for NS. Try updating and see if that fixes it.
If not you can update your package.json file to use "#nativescript/ios": "6.5.3",. That'll use the JSC compiler for iOS instead of the new V8 runtime, then your element and network inspector should work!

Chrome not working after installation of JDK

I installed jdk-8u101-windows-x64 on my Windows 10 x64 in order to proceed with installing a Netbeans 8.1 all in one package, and after JDK was installed the system immediately restarted.
When the system rebooted, Chrome stopped working. Loading any page or even settings page now displays "Aw, Snap! Something went wrong while displaying this web page. Learn more - Reload".
Clicking Learn more or reloading does nothing. I tried disabling Defender and enabling again, didn't work.
Reinstalling, or restarting the PC multiple times didn't work.
Has anyone come across this?
Thanks.
I also have a Windows 10 x64 OS and just tried installing the JDK. It was JDK 8 Update 101 and my Google Chrome version is 53.0.2785.143. It did not force me to restart but I went ahead and restarted and when I booted back up I did not see the same issues that you were referring to.
This leads me to believe that it's something specific with your machine and nothing with the JDK or Chrome itself. It's possible that you have some chrome extension that is causing problems.
To fix the issue you're having first I would download and install the Chrome Cleanup Tool. If that doesn't fix the issue, you can try launching Chrome in 'safe-mode' like so:
Right Click, create shortcut, rename, right click go to properties and add - -incognito- with out the - in the target field on shortcut tab. Then apply and ok
Once you are able to launch Chrome in incognito mode, then you should be able to delete the extensions via the settings.
If that still doesn't work, then you will likely have to delete the user data for Chrome in your AppData and registry manually. To delete your AppData go to:
C:\Users\yourname\AppData\Local\Google\Chrome\User Data and delete the Default folder then relaunch Chrome.
To remove the extensions from the registry, Open regedit and go to HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Google\Chrome\Extensions and delete the keys there.
Sounds like broken Java libraries...
Try uninstalling Netbeans, JDK, Chrome, in that order.
Then installing Chrome again, try it out, then JDK, try Chrome, then Netbeans, try Chrome.
Also check that you have 32bit JDK and that your preferred Java is set to 32bit since Chrome is 32bit.

Chrome Web Dev Tools not showing up on Mac OXS 10.11.2

Since two days the Chrome Dev Tools stopped working. I opened/closed Chrome. I restarted my MacBook but nothing worked. I tried to open the Chrome Dev Tools and no window is opening. I tried to solve it with the following trick: [1] but I don't have the file chrome-devtools_devtools_0.localstorage-journal there. Maybe this is because my problem is slightly different because on my MacBook the Chrome Dev Tools aren't showing up anymore.
When I execute the following command:
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --user-data-dir=/tmp/whatever
Everything works fine again. So I fear that my Chrome Profile is somehow destroyed. Is there a way to get the Chrome Dev Tools working without deleting my Chrome Profile? Deleting the profile would be the worst case. Hope someone could help me.
My Chrome Version is: 48.0.2564.116 (64-bit)
My Macbook is: OS X El Capitan 10.11.2 (15C50), MacBook Pro (Retina, 15', Mitte 2014)
EDIT:
I started Chrome with:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-logging --log-level=0
Then I got the following error message:
Uncaught TypeError: Object.observe is not a function", source: chrome-devtools://devtools/bundled/inspector.js (10681)
After pasting this error into Google I found the following thread https://bugs.chromium.org/p/chromium/issues/detail?id=549225#.
Is this expected behavior that I can not open the dev tools when javascript-harmony-shipping is turned on? With javascript-harmony-shipping turned off everything works as expected
[1] https://stackoverflow.com/a/28866632/1280401
Actually it seems to be a bug with javascript-harmony-shipping. Further details can be found here: answer from Paul Irish in Google Groups

Safari Web inspector keeps disconnecting

I've Safari 8.0.6 with iOS 8.3 on my iPad, while debugging through Web Inspector on my Mac (10.10.3), the connection keeps on disconnecting (I don't see the device name under Develop menu upon disconnection) but can resume if I quit safari followed by a relaunch then I'm able to refresh and inspect remotely again.
There are a few things to try:
1. Test on the Xcode Simulator:
Open the iPhone simulator in Xcode and debug there with Safari Web Inspector.
Sidenote: Maybe you need to download the Safari Technology Preview
2. Reset your location and privacy settings on your device.
Settings > General > Reset > Reset Location & Privacy
3. Debugging on a real device
With this configuration it seems to work right now.
iPhone X, iOS Version 12.1.3
macOS Mojave Version 10.14.2 (18C54)
Safari Version 12.0.2 (14606.3.4)
Edit 2019.08.13
Settings -> Safari -> Advanced -> Check that Webinformation is toggled on.
It was suddenly toggled off and I couldn't connect via the Web Inspector. After toggling it on, it worked.
For other devices / versions, please read further down (Maybe you can decrease your build size).
EDIT: 2018.09.20
#Chet found out, the Web Inspector keeps disconnecting for too large JS files and map files
https://stackoverflow.com/a/52338231/4641479
Issue on Github:
https://github.com/google/ios-webkit-debug-proxy/issues/275
https://github.com/google/ios-webkit-debug-proxy/issues/274
I could confirm this on a real device with a production build (1.8 MB + 2.4 MB files), the Safari Web Inspector stays always connected.
Since for the development build it is not:
Before my web inspector very rarely worked and often just stopped working - but was still open. After the safari update the web inspector opens and closes immediately. If you encounter such problems..
This will work:
Step 1. Get the latest Safari Browser
Safari: 11.1 (12605.1.33.1.2)
https://developer.apple.com/safari/download
macOS Sierra and OS X El Capitan (I assume macOS high Sierra is also supported)
Maybe you need to download the Safari Technology Preview
Step 2. Reset your location and privacy settings
On your device go to:
Settings > General > Reset > Reset Location & Privacy
Source: https://forums.developer.apple.com/thread/87181
Step 3. Connect your device
Open Safari on OS X
If you had connected your iPhone device with an usb cable, disconnect it first.
Now plug it in.
On OS X Safari go to:
Develop > Device name > Apply for development
Now on your phone there is a permission question. Choose trust and now you can choose the open tab on your devices safari and debug.
Happy debug!
Now the web inspector stays connected.
Do you have a lot of backgrounded apps running on your iPhone? Kill them and try again.
We showed this issue to Apple developers at WWDC, and they suspected it was due to memory constraints on the iPhone. Sure enough, killing most of our backgrounded apps resolved the issue for us.
Working Solution (as of 24th Mar 2020)
Well, after so many trials and opening thousands of blog posts to figure out a solution, I managed to get it working without a single case of failure.
For me, this has been always a problem with my Ionic+Cordova application.
My subconscious mind started to think about this problem when I saw that this issue (of Safari getting disconnected) is not there when I run a plain simple Cordova or Ionic application. And then suddenly, I tried another thing and it worked.
Basically, the Safari web inspector disconnects when the size of any files are too large (not sure about the limit). Maybe, some image, some script, and CSS. In my case, it used to because of the JavaScript & their source map files.
So, when I started to run my iOS application without source maps, the problem is gone. For that, all I had to do is to pass --source-map=false to my ionic cordova commands like:
ionic cordova run ios --source-map=false
ionic cordova run ios -lc --source-map=false
I wrote a small article about this to elaborate this in detail https://medium.com/wizpanda/a-small-tip-to-speed-up-development-with-angular-or-ionic-d5764f639c0c
Original Answer
Most of the answers listed here worked for me for a while but after a few hours they also stopped working and my Safari web console again keeps disconnecting as it opens.
Other few options that worked for me:
Option 1 - Empty Cache From Safari
Safari on MacOS -> Develop -> Empty Cache
Option 2 - Clear Trusted Computers
On iOS Device -> Settings -> Developer -> Clear Trusted Computers then reconnect the USB cable and then try to debug again
Option 3 - Make the debugger fool (as of 14th Jan 2019)
This solution is working for a long time now. Since this is an issue related to connection between iOS & Mac so I opened my Console app and just kept my iPhone selected. (This is somehow kept my iOS device connected to my Mac)
Then opening the Developer's console on Safari worked fine for me without disconnecting.
Option 4 - Run via Xcode
This is also a kind of workaround and a hack to see it functional. You can basically prepare your iOS app by ionic cordova prepare ios and then run the app using Xcode and deploy it to your iPhone.
At least, I'm able to see the console logs and sometimes, it even works with Safari web inspector.
Option 5 - Run on iPhone simulators
I think this is the most working solution. This option is suitable when your system is not running too many applications as firing a simulator suckup a good amount of system resources.
Basically, instead of running your app on a real device, run your app in an iPhone simulator via Xcode and debug it normally in your Safari web inspector and this problem will not occur.
This is probably because the files being transferred to Safari inspector is from the system itself.
Sounds strange but it may be happening due to the battery being full triggering a disconnect: https://forums.developer.apple.com/thread/92290
The disconnection seems to occur when the battery of the Iphone is full. (So for the moment we turn the flash and the camera on to kill the battery while inspecting ...)
This is only necessary for physical devices. Physical devices can be forcefully disconnected by Safari if the device's battery is full. ("Full battery? Well then, let's just disconnect you as you don't need to charge anymore -- and there goes your debugging session too...")
You will want to select Connect via Network in Develop > [device], and then attach your debugger to the page you want to debug. If you do not have the Develop menu in Safari, go to Safari > Preferences > Advanced and select Show Develop menu in menu bar.
If this doesn't work, you may try upgrading your OS/Safari through the App Store first.
If things are still breaking, disconnect your iOS device. Go into your iOS device into Settings > Safari > Web Inspector and turn it off and then back on. Force quit out of Safari. Re-plug in your iOS device and start up Safari again and re-attach your iOS device through Safari > Develop menu.
Closing XCode first helped for me.
This plagued me for a long time with very inconsistent behaviour, here are a few things I have found that help, I also wrote a blog post on this here.
Update both mac safari and ios - I have found after having the latest of both versions it started working for me, there could be debugging incompatibilities between Safari's.
Check that web inspector in ios is enabled - It has been known that this setting can be switched off after an upgrade, check in settings > safari > advanced > web inspector.
Check the port you are connected to - I have had mine plugged into a cheap hub / via apple keyboard/monitor hub and found that going directly into the mac works much better.
Are you using a good quality cable? - I have found that better quality / official cables that aren't worn out have better reliability when in debug.
Other notable observations - other people have commented that making sure cookies are enabled in safari, enabling private mode and trying whilst Xcode is open have affected the reliability of this, although I haven't seen this myself it may help others to try.
I can't say I have a solution, but a step in the right direction.
I tried using ios-webkit-debug-proxy so I can use the Chrome Dev Tools instead of Safari Dev Tools.
Note, in order to get it to work, I can to upgrade my iOS to the latest 11.4.1 and MacOS 10.13.65, then reinstall the latest versions:
brew update
brew install ios-webkit-debug-proxy
brew reinstall --HEAD libimobiledevice
brew reinstall -s ios-webkit-debug-proxy
ios_webkit_debug_proxy
After running ios_webkit_debug_proxy, I was able to try to connect through chrome://inspect and it disconnected immediately again:
Listing devices on :9221
Connected :9222 to Chet's Phone (6a028994cf281be807bf80c5557c3f2eb3fbb8b0)
Invalid packet header 0x1ffffff91ffffffa0ffffff9d == .... == 26321053
Disconnected :9222 from Chet's Phone (6a028994cf281be807bf80c5557c3f2eb3fbb8b0)
However, we have a clue! Invalid packet header. Sounds like a lower level bug somewhere. Not sure where to submit this but to though...
The magic solution worked for me:
Reboot your MAC
Reboot your iPhone
09-07-2020
Still this issue on Latest MacOs (Catalina 10.15.5) on Safari (13.1.1)
Solution on Ionic/Capacitor:
ionic cap run ios -l --external --source-map=false
The most recent Safari Technology preview appears to have solved it for me.
https://developer.apple.com/safari/technology-preview/
MacOS Mojave / Catalina Solution
For me the issue started right after I upgraded to the new macOS Mojave, this might have been mentioned somewhere above but for me I just needed to download the new "Safari Technology Preview" app that is built for Mojave.
Safari Download Page
https://developer.apple.com/safari/download/
Direct Download for Mojave
https://secure-appldnld.apple.com/STP/041-71285-20190604-6d0dcb17-07e5-40a0-b418-dba732cefe64/SafariTechnologyPreview.dmg
For me using a different adapter and cable solved the problem.
Every time you connect, it should ask for "Trust this device" like prompt on smartphone, if not then it's the cable/adapter issue.
When using a content-blocker (e.g. 1Blocker) on your iOS device, make sure it is disabled for the domain you want to debug.
Disabling 1Blocker stopped the Web Inspector (Mac) from closing immediately after opening it, and allowed me to get back to work.
I know there's a lot of answers already, but I wanted to post because none of them worked for me just now. But, my phone's battery was in "low mode" ... but since I'm plugging it up for development, I didn't think that was a big deal. But, going into settings on my phone and turning off low battery mode fixed my problem. Now safari doesn't disconnect.
Just wanted to post that in case someone runs into this with a low battery.
Working solution for ionic app:
ionic cordova build ios --source-map=false
Capacitor, Ionic, Cordova
rm -rf platforms/ios/**/*.map
I've been seeing this issue when using live preview in Capacitor while building an Ionic Angular project on macOS Monterey previewing on iPhone Xs. Here are a few ways I can get over this bug and continue development...
Make sure you're using Safari Technology Preview and not the regular version of Safari.
Close and Re-Open Safari Technology Preview if it continues. You could also try inspecting using regular version of Safari after installing Safari Technology Preview. It may work for debugging almost as well.
On your device, open the app switcher and close all background applications before starting development on your app.
Toggle 'Connect via Network' in Safari on your computer by using: Develop > Device Name > Connect via Network in the Safari menu.
Disconnect and reconnect the lightning cable of your device. Make sure it has a steady firm connection to the computer. Off-brand cables can cause intermittent development issues.
Quit your app, go to the app switcher and force close your application by swiping it away. Then re-open it using the app icon in the launcher. Try inspecting it again.
Try rebooting your computer and rendering your app again. After a lot of up-time there may be some built-up log data that needs to be dumped.

Resources