Safari Mobile Web Inspector not displaying Element Tab - mobile-safari

The Elements tab (as well as others) in the Safari Mobile Web Inspector is not displaying. I can only see the Console, Sources, and Audit tabs. The Sources tab isn't showing any of the sources for the site.
I am trying to debug the styling for an app using Webview and Cordova. I have tried inspecting a Safari mobile web page and the same thing happens.
Workspace:
iOS: 14.6
iPhone: 8
macOS: Big Sur 11.4
Xcode: 12.5 beta 2
Safari (desktop): 14.1.1
This was working previously. The only thing that has changed is that I updated my macOS version. I can use the web inspector as intended on Safari (desktop).

One solution I found was to install the latest Safari Preview Technology.

Related

Visual Studio 2015 - Bootstrap CSS stopped working on Chrome

In the past few days I have been developing a unniversity project on Visual Studio by debugging on Google Chrome every single time.
Now I suspect that after updating my Windows 10 to the latest version - 1803 - something has stopped working while debugging on Chrome. The menus are no longer responsive, if I try to resize my page the content doesn't seem to go to the placed they used too and the text style has changed aswell.
NOTE: Debugging on Microsoft Edge appears to be working as expected.
Creating a new project with a bootstrap theme and debugging on Chrome gives the very same issue. Is there anything I can do to solve it?
Here's some screenshots of it debugging on Chrome and Edge.

Safari showing images transparent

I have one interesting issue on this project, which is actively using Visual Composer WP Plugin.
When one of my clients tries to view the site on
MacBook Air OS X El Capitan
Safari v. 9.0.1 (11601.2.7.2)
the browser does not show any images on the main page. They are all loaded to the DOM and can be saved and then opened like a separate file, but on the web page it is just an empty space (smth like css {opacity: 0} rule).
I've been looking for some articles on this issue, but most of them refer to official forums and browser settings fixes. But it is not the case, as this client has a complete user experience on other web pages. And I must say it'is working fine on all the other major desktop and mobile browsers.
Update
Tested with
Safari 8.0.4 (10600.4.10.7)
MacBook Pro OS X Yosemite
works like a charm

Equivalent to right-click 'inspect element' in iOS simulator Safari?

When developing a web app using ionic, it is very useful to run up the program in iOS simulator with the command line
ionic run ios -l -c -s --target="iPhone-5s"
Then by selecting desktop Safari and Develop -> iOS Simulator you can bring up the Web Inspector for the app on the simulator.
All well and good.
On desktop Safari, it is very useful to right-click on an element to find it in the Web Inspector. Is there a way to do this in iOS Simulator Safari ?
I end up putting a searchable string into the HTML and Ctrl-F to find it which is more cumbersome.
There is a target button in the web inspector window that can select an element inside the iOS Simulator. Here's a screenshot:
"Select Element" button in Web Inspector

Why do the C4 github examples lack support for an iPad simulator?

I have recently downloaded the testScrollView and WalkCycle examples from https://github.com/C4Code, but the dropdown window in the topmost toolbar lacks the option to select iPad simulator as the target device. Do I have to have something enabled in order for this menu to display correctly, or is this an issue of incompatibility between C4/XCode versions?
I recently upgraded to iOS 6, so all the projects I build and put up online will be targeted for iOS 6.0 simulator.
Check the following link, the answer there will show you how to change your settings so that it builds for the iOS 5.1 simulator:
Xcode 4 - IOS - Simulator not available as build target

Google Chrome/Safari Same Browser Name and Version !

I have a asp.net website in which i check for supported browser.
That is i user
Request.Browser.Browser -- for the browser name
and
Request.Browser.MajorVersion for the browser version
Problem here is browser Safari and Google Chrome show me the same value !!!
That is AppleMAC-Safari(name) and version would be 5..
How do i differentiate between google chrome and safari then ???
Thanks ,
Francis P.
For each browser that Request.Browser.Browser can detect, there must be a *.browser file in C:\Windows\Microsoft.NET\Framework\v2.0.50727\CONFIG\Browsers. Chrome and Safari are missing in version 2 of the .NET framework, but you can download an updated set of browser configurations from codeplex: http://aspnet.codeplex.com/releases/view/41420
There could possibly occur some compatibility issues (since these files are made for .NET 4). In such cases you may have a look at this blog post: http://stephenwalther.com/blog/archive/2010/03/05/use-asp.net-4-browser-definitions-with-asp.net-3.5.aspx

Resources