The Safari 11 beta 6 Web Inspector has a feature I want: the ability to retain items in the network tab after navigating to the next page. Unfortunately, it also appears to have a bug: it can no longer find "inspectable applications" in the devices area of the Develop menu. Same problem with Safari Technology Preview Release 38.
For Safari windows on the Mac, that's not a problem; I can control-click and Inspect Element and I'm in business. But for troubleshooting pages on a device, I'm hosed -- this was the only way I knew to open up the Web Inspector against an external device.
This isn't a problem of losing the "Web Inspector" setting on my phone (that's still checked), and as you can see in the photo, even the desktop browser itself doesn't show the currently open windows.
Related
I'm trying to debug a web app that is added to home screen. I have enabled web inspector on safari. I am able to debug the app if I open in iOS safari but when I add the app to home screen and try to debug, it shows 'No Inspectable Applications'. Any help would be appreciated.
iOS version: 11.2
MacOS Safari version: 11.0.1
You should put focus on the app first and then press:
Option+Command+i
So you do not open the inspector in advance in this case. This is not possible because you can consider it like opening a new browser tab where it makes no sense to inspect it from the inspector in another tab that is already open. Since the menu to open the inspector is missing when the PWA is opened as a desktop app, you need the keyboard shortcut to show it.
Not sure if it's related, I had an issue where I couldn't get the inspector window to open for a cordova web app on iOS 11.2
I found that I had to go back to (ios) settings and toggle Safari Web Inspector off and on while looking at the (osx safari) developer menu to see it and then inspect it.
How can I specify the icon/ image thumbnail and text used in the iOS Chrome new tab? It doesn't appear to be http://example.com/favicon.ico.
Screenshot of iOS Chrome new tab
Quick and easy solution
Apparently you have only one icon, favicon.ico, which is mostly ignored by mobile browsers. You should at least define a Touch icon. You can use a service such as Real Favicon Generator to create everything and support all browsers.
Full disclosure: I'm the author of this site.
Precise (but probably too elaborate) solution
Run the compatibility test to understand which icon is actually displayed by Chrome in this particular place. For example, if you discover that Chrome takes the 152x152 Apple Touch icon, well, now you know what you need.
Problem: you probably want to support all scenarios (Android Chrome, iOS Safari, etc.), not only the "New tab" of iOS Chrome. So even if you find out, you will probably want to declare other icons.
I don't have an iphone, but I want to see what the HTML looks like to my users using an iphone.
Is there a way to emulate an iphone, so that flash does not appear ? For example if I visit YouTube, I don't want to see the Flash player in an emulator.
Thanks
Download Xcode for free if you have a mac and you can use the iphone simulator bundled with it. See this link on How to run iPhone emulator without opening Xcode
try safari browser. select Develop, User Agent, iPhone (or iPad or iPod Touch) from that menu.
if the Developp menu is not found then, Show Develop menu in menu bar in the Advanced Preferences
I'm trying to debug a problem with mobile Safari.
I'm using the desktop Web Inspector and a connected iPhone, and it basically doesn't work in any useful way.
DOM elements don't expand. I click on <div id="content">...</div> which contains 50 other DIVs and nothing happens except that the close-div disappears.
No CSS shows in the right-hand panel for any selected element
Images can't be loaded (I just get a spinner)
Are there known problems or incompatibilities? I'm using
Desktop Safari 6.0.5
iOS 7.0.4
I had this problem, too - you'll need to update to Safari 6.1.
I have changed the sass file in sencha and compiled it
Cleared iPhone simulator, cleaned the project
Nothing helps, in the browser I can see that the new styles were applied, however in the iPhone simulator and iPhone itself they haven't
So basically this is the smallest changed I wanted to try:
from: .x-desktop .x-title .x-innerhtml{padding: 0;padding:0;color:fff;}
to: .x-desktop .x-title .x-innerhtml{padding: 0;padding:0;color:#52A5D6;}
So my question is:
Why could cause this issue? Solved: if you look at the first class it belongs to x-desktop...
How to debug the sass if the styles have been transferred to the devise and applied?
Thanks
You can use Safari's Web Inspector to inspect your application while running in the simulator, or while running on a connected iOS device. To do this, first open up Safari and go to Preferences -> Advanced, and check the "Show Develop menu in menu bar" checkbox.
After this, launch your application in either the simulator or a connected device, then bring Safari to focus. Click on the "Develop" menu, and then either "iPhone Simulator" or the name of your device. You will see the page listed in the next menu.
From here, after navigating to the page, you can use the Web Inspector to inspect the page like you would if it were in the webpage.