How to force desktop browser to open in mobile mode - javascript

Is there a way that i can force google chrome on my pc to open my web project in a mobile view port automatically
I thought changing the meta tag of the view port in my DOM would get the job done.

If you only want to take a look of your project in mobile view, you would simply just use the DevTools (F12) and then click the Toggle device Toolbar (Top left Conner icon) or Ctrl + Shift + M to mobile view.

Related

Difference in using chrome mobile view in desktop and using chrome in mobile

I am working on an application which has a web view and a mobile view. For testing the mobile view I had used the chrome change to mobile display / tablet display option. But when I'm using the application in the mobile, there is a big difference. What am I missing ?
One of the differences in between web view and mobile view when we test is that of the user agent. If you want to get the mobile experience in testing on google chrome, you should not just change the view from chrome to mobile / tablet. But you should probably also find a way to change the user agent itself. Else you can open the same uri on the mobile phone browser. That way the user agent remains the same.
Also certain actions in the mobile browser will be different from that of web browser. In a browser in mobile view you can expect touch based actions whereas in the other case on web browser you can expect click based actions.
Read more on user agent here : https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent
Also, you can use https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg to switch your user agent. We used that in a project although I do not know if it works well now.
Here's a reference on touch events: https://www.w3.org/TR/touch-events/#event-touchstart

Crosswalk webview on Cordova not resizing after fullscreen

I'm using Crosswalk webview on Cordova to display a webApp made with Ember.js.
In some pages the app have iframes which open a Vimeo player, and I allow them to play in fullscreen.
When the user plays it, it enters fullscreen automatically, resizing the page to increase its height. But, if the user closes fullscreen (or when the video ends and the fullscreen closes), the page isn't resized back to the original height, and my top menu gets hidden behind the mobile status bar.
If then I navigate to another url, the page gets resized and everything is beautiful again.
My question is: is there any javascript/CSS trick I could try to get around this?
INFO: I tested this against 2 phones, one Android 4.1 and the other Android 5.0, and it only happened in the Android 5.0 one. So maybe this is a Crosswalk bug. Doesn't happen at all if I use the native webView, but I wanted to avoid switching to it.
Any help appreciated ;)

How do I get to this handy debugging screen?

While debugging a web page in Chrome, my finger slipped and I pressed a combination of something (around the F12 key) on the keyboard. I got this screen:
Which is incredibly handy for developing mobile pages and actually something I've been looking for. Now I can't figure out how I got this.
So, how do I get back to this screen.
That's the emulation screen, press F12 then click on the mobile in the top left corner.
Simple, press F12 to open up the developer console.
Then, to show the device choice options:
Ctrl + Shift + M in Windows/Linux
Cmd + Shift + M in Mac
To show the ruler, go to:
Under Settings > General > Show rulers a ruler can be enabled which
will be displayed when you hover over or select an element in the
Elements panel.
All keyboard shortcuts for Chrome can be found here:
https://developer.chrome.com/devtools/docs/shortcuts

How to disable JavaScript in Chrome Developer Tools?

I am trying to debug the features of a website when users disable their JavaScript. I was wondering how do you disable JavaScript for a page from the Google Chrome DevTools?
Click the gear icon in the corner of the Developer Tools, click Settings, then under Debugger, check Disable Javascript, as shown in the following video:
Update August 2020
Developer Tools (F12)
Click the Gear icon
Should open the Preference tab
Disable Javascript option is on the far right
Original answer
Developer Tools (F12)
Three vertical dots in upper right
Settings
Under the "Preferences" tab on the left
There will be a "Debugger" section with the option (probably on far right)
Official documentation: Disable JavaScript With Chrome DevTools
There's now a command menu built into DevTools that makes it easier to disable JavaScript. This has been around as of April 2016 or so.
Open DevTools.
Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux) to open the Command Menu. Make sure that your cursor's focus is on the DevTools window, not your browser viewport.
Type Disable JavaScript (or some version of that... it's a fuzzy search) and then press Enter.
Use the Enable JavaScript command when you want to turn it back on.
chrome://settings/content Javascript/Manage Exceptions
This extension makes it faster (I am the author) : Quick Javascript Switcher
It is open source: https://github.com/maximelebreton/quick-javascript-switcher
You can also run Chrome with JavaScript disabled by default by using the flag:
-disable-javascript
You would use this for example by running Chrome like this:
C:\Documents and Settings\%username%\Local Settings\Application Data\Google\Chrome" -disable-javascript
The quickest way is problably this one:
F12 to open the dev console
ctrl + shift + p to open the command tool (windows)
Type 'disable javascript' and hit enter
On OSX, I had to click the triple vertical dots, and uncheck a box in the settings section. Which can also be opened with f1
Using only the keyboard at least for Windows 10:
F12, shows Developer Tools
F1, shows Settings
tab, moves to the "Disable Javascript" check box
space, toggles the option
esc, hides Settings
The fast way:
1) just click on CTRL + SHIFT + P
2) fill the field by the 3 letters dis and will appear this box and select the item Disable Javascript
.
that's all folks!
On Mac OS X:
Preferences
Show advanced settings
Press the "content settings" button
Scroll to the "JavaScript" section
Check the checkbox in front of "Do not allow any site to run JavaScript"
The Chrome Quick JavaScript Switcher extension is a lot easier though :-)
Go to options (Windows: three vertical dots in the top right) -> Settings, or hit F1.
In the General section you find "disable JavaScript"
The gear icon is no longer part of developer tools. Since Chome 30.0 it is not even possible to bring it back (In Google Chrome Developer Tools, the toolbar icons disappeared. What gives?)
To temporarily block JavaScript on a domain :
Click on the Button left to the address on the address bar (which says View site information)
In the drop-down next to JavaScript, select Always block on this site
Reload Page
Click the ⋮ menu in the corner of the Developer Tools, click Settings
Click on Advanced at the bottom
Click on Content Settings
Click on JavaScript
Switch off
Full and fast instructions for Chrome browsers (Opera incl.)
The first way
If Developer Tools aren't open then press F12 key on keyboard to show the Developer Tools. In Opera browser you have to use key combination Ctrl + Shift + i on keyboard to open it.
To show the settings just press F1 key on keyboard. The Developer Tools window must be focused when you are doing it. Or if you want to open the settings with the mouse then you have to click on ⋮ button in the top right corner of the Developer Tools, then click Settings in the menu.
Then you have to scroll down the settings window to bottom and then you will see the checkbox for disabling JavaScript like follows:
Just click on this checkbox and push esc key on keyboard for hide the settings. If you want to enable it then you have to do the same way again.
The second way
If Developer Tools aren't open then open it like in the first way is described.
Press the key combination Ctrl + Shift + P (for Windows or Linux) or Cmd (⌘) + Shift + P (for Mac) to open the Command Menu. Be sure that the focus is on the DevTools window.
Type there "Disable JavaScript" and then press Enter or click it with the mouse. If you want to turn back the enanled JS then open the Command Menu again and type there "Enable JavaScript" and then press Enter or click it with the mouse. You could also write just only "JavaScript" or "Java" there and then choose it with the mouse.
If all this does not work
For some reason it is possible that it does not work. I this case open a new empty site in "Incognito Mode" and do all this there.
The quickest way
In Chrome Web Store or on Opera Addon site you can find and install extensions which do it per one click. Just search "Javascript Switcher":
For Chrome browser
For Opera browser
Press F8 for temporarily freezing / unfreezing JS (with DevTools open).
This is very useful for debugging UI issues on elements that may lose focus if you click or press anything outside of that element. (Chrome 71.0.3578.98, Ubuntu 18.10)
Paste it: chrome://settings/content
Go to "Javascript" section and disable it.
Chrome://chrome/settings/Privacy/Content settings/JavaScript
and there you can PASTE your website's URL in Manage exceptions.. and change the JavaScript priority from ALLOW to BLOCK.
This is the latest setting for the windows
Settings > Advanced > Privacy and security > Site Settings > Javascript > Blocked then get switch on and off
good question, i try so many way, but it is curry and boring, until i find shortcut.
alt + cmd + i, this open dev tools, unless you use pocket, that need set other shortcut.
shift + cmd + p, then input: javascript
only two shortcut, but i think safari is more convenient for that.
There's a settings in chrome
open the menu from chrome,
click settings > type in "javascript" in the search bar > click site settings > click javascript.
from here you can toggle javascript specifically to a site using their url.
or just click the big button to allow/block it to all sites.
I arrived here simply wanting to know how to disable javascript in chrome:
Right click on the website
Click "inspect"
Hit keys: ctrl + shift + p
Type: "Java"
Click "disable JavaScript"
Refresh page
It's from here

stringByEvaluatingJavaScriptFromString is not working in iOS 6

I am seeing problem happen only on iOS 6 but working fine on below iOS 6 version.
My app is loading image from a link which need to enlarge its image pixels to populate within size of UIWebView by using Javascript. The link image is originally in pixels 140x24.
I see it is running over the line, but the image not being scaled up using iOS 6 simulator. It does work in iOS 5 simulator. Please help.
(void)webViewDidFinishLoad:(UIWebView *)webView {
[webView stringByEvaluatingJavaScriptFromString:#"document.getElementsByTagName(\"img\")(0).height=\"30\";document.getElementsByTagName(\"img\")(0).width=\"280\";"];
}
The syntax in javascript to get the n-th element of an array is using square braces, not parentheses. So use document.getElementsByTagName("img")[0] not document.getElementsByTagName("img")(0).
Not sure why it was working in iOS5, WebKit is probably more strict in iOS6…
Additional tip: to debug javascript errors on iOS6, a new feature makes it very simple:
Go to the "Settings" application in your iPhone, enter the "Safari" settings and tap on "Advanced" at the bottom, then enable the "WebKit Inspector" from there
Display your page to be debugged on the screen (i.e. launch your app and go to your screen that contains the WebView to make it visible)
Plug your iPhone to your Mac via your USB cable
Open Safari.app on your Mac, go to the "Development" menu (1), select the menu item with the name of your iPhone and select your application in the submenu.
You will then be able to debug your web page presented in your iPhone using the powerful Web Inspector from your Mac, and can look into the javascript console, the DOM tree, etc.
(1) If you don't have the "Development" menu in Safari on your Mac, you can enable it in the "Advanced" preferences tab of the Safari application.

Categories

Resources