Not sure if this is possible in other mobile browsers, but it is possible to open the devtools inside the Edge browser app in you phone?
I have this UI issue that that I can see on my phone and so far I haven't been able to reproduce it on Edge desktop or any other desktop browser for that matter; not even if I match the screen size using the dekstop devtools.
I need Edge mobile devtools specifically because the website is internal and only accessible through Edge.
Devtools are not available for Edge mobile.
If you want to debug the Edge mobile app, you can use Device Mode to simulate mobile devices in your desktop Edge Chromium browser. For the detailed steps, you can refer to this article.
If you're using Android devices, you can even use remote debugging. It can remote debug live content on an Android device from your Windows or macOS computer. You can refer to this article for more information.
It's possible with help of eruda project
Add bookmark on any website, name it as Open DevTools, put this script as a value
javascript:(function () {var script=document.createElement('script');script.src="//cdn.jsdelivr.net/npm/eruda";document.body.appendChild(script); script.onload = function () { eruda.init() } })();
Open website you would like to investigate
Open search bar and enter same name, Open DevTools - your bookmark will appear
Click on it, few seconds later you will see gear icon on the bottom. Click on this icon will open dev tools
Related
hrmantra
is the site i want to view mobile view of. For which i have also changed my user-agent string in my pc's mozilla browser. I need this to be done, please help
You can use the Responsive Design Mode tool in Firefox to pick a mobile phone configuration or create a new one with custom settings. You can access this tool, as reported on the provided links:
From the Firefox menu: select "Responsive Design Mode" from the Web
Developer submenu in the Firefox Menu (or Tools menu if you display
the menu bar or are on OS X).
Picking a mobile device will automatically set the correct screen resolution, user-agent string and device pixel ratio (DPR).
I was seeing a website i.e. website if you give pincode and search, you will be provided with a listing. When i click on any listing the section shows up on map. But when i go on a mobile, i see that click works differently i.e. a section slides in. How is this done? does the same function work different in mobile and desktop?
Cool effect, no? So open up the site on your desktop. Open it in Chrome. Then open the Chrome Developer tools. I use right click --> Inspect. Then on the top bar of the dev tools on the left hand side choose the icon "Device Mode" Select a device like an iphone or something. Now you can simulate this (or any site) on a mobile device. Its not a prefect simulation, just size and shape and general touch screen events like swipe and touch.
The design of this site uses some sort of javascript library to manage the transition. I've used jQuery Mobile in the past and this is exactly what it does. I'm guessing Controls.js is the tool that's doing this here, but I'm not positive all the nuances of this site. There are quite a few JS tools loaded here.
What ever happened to less is more, sigh?
I can't figure out what is causing this issue on the BlackBerry Z10 where the mobile menu that I created for disinherited.com won't properly function as links.
The menu items won't click through to their href's or show their dropdown menus(javascript).
It works well on a number of other browsers and devices. This is just one that won't work.
Anybody have any suggestions as to what browser compatibility issues I might be missing?
The "About Us" link doesn't do anything for me (even on Desktop browsers).
I would guess that there might be some CSS (a layer maybe) that is interfering with the click/action event. I would suggest connecting remote web inspector to see what exactly is going on.
Did you know that BlackBerry 10 has some of the best remote web debugging capabilities?
Plug your device in via USB
Enable Settings -> Developer Mode
Open http://disinherited.com in the BlackBerry browser
from your desktop browser, open http://169.254.0.1:1337
You are connected to the live content, running on the BlackBerry, from your desktop browser. From there, you can inspect, debug, profile what your website is doing.
With respect to webpages and webapps using Facebook's Javascript and Server side integration...
Facebook documentation notes that the send dialog is not supported on mobile devices, but they don't indicate how they make the determination that the dialog will not be shown or how we can find out.
This makes it difficult to display some alternate functionality in the right cases. For example the iphone is out, but the ipad will display the iframe version. The Nexus 7 with Chrome won't do the popup, but it doesn't have "mobile" in the user agent.
Does anybody know the criteria? ie. Regex on the user agent, or some certain feature detection?
Right now I am using browser sniffing :-(
function isMobile(string) {
return /mobile|android/i.test(string || navigator.userAgent);
}
Which, for instance, doesn't account for the fact that iPad Safari will display this dialog as an iFrame (but not the popup).
Thanks.
I'm currently developing a mobile site and I'm finding it very clunky to work with a browser through an emulator.
Is there any way I can make a browser (which runs on OSX) "pretend" it is a mobile browser so that I can get mobile html back from the site I'm guessing things like inspect in chrome or firebug on firefox?
NOTE: I really wish I could have accepted all of the answers.
I think you can change the User-Agent of the browser and then, the server will send you, if a mobile version is available - this one!
Like stylesheets etc.
There is a nice addon for firefox called "User Agent Switcher"
For Safari;
In the normal Mac OS X Safari, go to Preferences/Advanced and check "Show develop menu in menu bar". A menu called "Develop" will show up with a sub menu called "User Agent". In that you can choose to send user agent strings for - for example - iPhone and iPad.
The develop menu also has a "Web inspector" which while not as powerful as FireBug is pretty good for inspecting the results.