I've been using Chrome forever for development, but it seems as if the last few versions - they've changed the functionally of the Web Inspector.
For instance, before I was able to search the 'Resources' tab, but now I have to search via the console, which makes it less easier than the way before I think Chrome 31.
Is there a way to rever back to the previous Web Inspector?
Same thing with Safari, but they changed their Web Inspector long before...
Thanks,
Roc.
Related
I created one simple nuxt project. Every time when I try to change something in chrome dev tools (for example check and uncheck some css), other css styles will be removed.
Does anybody know why this happens?
The problem happens only in chrome and opera. In Firefox it doesn't happen.
I am examining PWA and Web Components technologies recently. As far as I have learned now Web Components is a new suit of tech,
Custom Elements, Shadow DOM, HTML Templates and HTML imports. Together with those Web Components enabling techs Web App Manifest, Service Workers, and certain performance improvement techniques used to make what is called as Progressive Web Applications.
What I wonder is when one "Adds to Home Screen" an application in a certain web browser what is the browser that opens it when it is launched from its home screen icon? Is it the browser it has been added to home screen from, or it is the default browser of the system no matter which browser it has been added to home screen from, or it is just a generic web view available on the host operating system at the moment like the one used in native web applications?
Lastly, is it possible for a developer coding her/his app to choose one?
Currently, for me, these combinations open a new "Standalone" window
I believe Android/Chrome is the only one that installs a WebApk
All the others are just shortcuts to open your website in that browser without the normal browser navigation items
I know of no options for the developer for how the shortcut opens your PWA
Android 8.10 - Chrome 67
Android 8.10 - Chrome (beta) 68
Android 8.10 - Edge 42
Android 8.10 - Opera 43
iOS 11.4 (simulator) - Safari
As test I created app shortcut of site https://pwa.rocks from browser:
Brave
Firefox
Chrome
and found that there were 3 different shortcut created for each of the browser. Launching each shortcut resulted in opening the respective browser that created it.
I believe there is no way of changing the default browser to launch the app by coding something in the app. I could not find a way of doing that, if someone knows how to do it, I will be interested to know about it
Here is similar question: What browser will PWA (Progressive Web App) use after adding to home screen?
Google announced that they drop support for web apps in Chrome.
Basically, web app is a local HTML/CSS/JS app that runs in a separated custom "standalone" Chrome window.
Is there any way (preferably easy), to convert this web app to a real desktop app that not depend on Chrome in anyway? Using maybe NodeJS? If yes what is the right way to do it?
Thanks.
You could try one of these tools:
https://applicationize.me/
https://www.bzgapps.com/coherence
https://fluidapp.com/ (for Mac only)
Don't know about "easy", but it seems to me that the natural evolution is to Electron or NW.js, and both of these are mentioned in the Google blog article on this subject. (I'm moving to Electron.) Both have advantages over Chrome Apps, mostly that they are true desktop applications. To cite one example, you can now manipulate the menu bar, something out-of-bounds for Chrome Apps.
Pure JavaScript code in your Chrome App, such as anything to access the internet, should move over directly. Same for much UI stuff, as you're still using a browser window for the UI. The app will, however, have to be restructured.
Added Note: Chrome Apps ran on 4 platforms: MacOS, Windows, Linux, ChromeOS. Electron and NW.js apps won't run on ChromeOS. So, the ability to write a four-platform completely binary-portable app is going away.
Is it possible to clear mobile safari cache using the desktop web inspector in Safari?
I know I can go to the settings in the iphone, but it's a bit of a hazzle and since the phone already is teathered to the computer while debugging, it would be really nice if I could clear it thourgh the webinspector in safari.
You can use Cmd + Option + R while in the developer tools web inspector to force mobile safari to reload its cache.
I had another problem which was that Fiddler also has a cache. I also had to clear that as I was running the iPad through the fiddler proxy.
Once I cleared the fiddler cache, and then used Cmd + Option + R, I could see the iPad requesting and receiving the new files.
I came across this issue with safari 11.1, and the answer was really simple. There is actually a button on the right top corner of the network tab to disable caching when debugging. I thought about leaving this just in case someone else miss the button just like I did. ( the one in blue )
I'm using Safari 11.1 on a macbook, and using Web Inspector connected to an iPhone with iOs 11.2.6.
From the Web Inspector, if I use the key board short cut: OPTION + COMMAND + R, it both clears the cache and reloads the page.
Well, there is an option for this in the Develop menu - however it doesn't appear to work.
A simple way around this is to add a new parameter to your url
eg. http://domain.com/testing.html?refresh=1
(of course having the functionality working in Web Inspector would be better)
Old thread but if you have your iphone connected to your desktop developer tools, you can hit OPTION + CMD + E (shortcut for empty caches) while viewing the web inspector that is connected to the iphone. Then hit the refresh button in your iphone browser.
Make sure you are really connected (Develop > Your Phone Name > The Website being viewed on phone) It should show on your desktop developer tools dropdown menu.
Safari 11.1
High Sierra
ios 11.4
Try Cmd+alt+R when iPhone is connected and your inspecting with developer mode. It worked for me!
Nothing here worked for me on iOs 11.4.1. After digging around in the network tab I found Command + K which is "Clear Network Items". I hope this helps someone.
You can connect your iPhone to a MacBook via USB and use the Safari Web Inspector
Once you are connected, you can use Develop -> Empty Caches.
Is there a way to disable caching on ipad/iphone? I want to run some automated tests for non-cache experience.
I just stumbled across a way to disable cache in Safari on iOS:
iOS
Open Settings
Navigate to Safari > Advanced
Enable Web Inspector
Switch back to Safari and load a web page
Desktop
Open Safari
Navigate to Safari > Preferences > Advanced tab
Enable the Develop menu
In the Develop menu, select Your iOS Device Name > The Page You Want to Debug
Press Command-Shift-R to reload while disabling cache
Bonus: This is a full Web Inspector on your computer inspecting a page on your iOS device
If you want something more permanent, you'll either have to go the proxy route or make a UIWebView/WKWebView wrapper app that disables caching.
I could be wrong, but on iOS does putting Safari in Private Browsing mode disable cache?
There is a way to effectively disable caching on iphone/ipad/IOS.
Install Fiddler on a windows desktop, and allow remote computers to connect:
In IOS, setup a proxy under your wifi connection settings, pointing to to the IP address of the computer you are running fiddler on, and on port 8888 (assuming you haven't changed it from default in fiddler):
By now, fiddler should be intercepting all web requests your device is making.
You can now disable caching from the Rules -> Performance menu in fiddler.
Doesn't seems like possible. On desktop safari, there is a option to disable cache in developer tools, however there isn't one on mobile safari. I didn't find the option in other browsers like opera neither.
If you wanna try, you can overwrite a desktop firefox's user agent string and make it a fake ipad mobile browser, and then disable cache. But that will depends on what you want to test and it could not work at all.
Hope this helps.
In the newest MACOS doesn't work anything to "full reload" content to me. Debug isn't really something pleasure.
After connect desktop Apple Safari with iPhone or iPad - it should work ALT+CMD+R - but not for me.
The newest trick is
hold CTRL+SHIFT
and CLICK not touch, to icon "Reaload page"
Maybe help someone.
Thx for inspiration
https://stackoverflow.com/a/24129161/1347601
Using iOS Simulator 9.0 I have been finding that both the Developer - Disable Caches menu item and Cmd-Shift-R reload have both failed to completely bypass the cache for whatever reason. The only thing that worked was to hold shift and press this reload button in the Safari Developer tools: