Debugging with the Chrome console

Arbu · July 26, 2022

I've got a web application which isn't optimised for mobile phone usage and I don't think it would every be practical to do it. But when I tell people about the application they always go and look it up on their phones. So I was thinking that I would have a page that explains, when they look on their phones, that it really isn't designed for use on a phone, but, if they really want, they can access it on their phone to get an idea of what the product looks like. This is proving a lot harder than I expected. I have some code which redirects from the main page to a warning page. But I can't debug it in the Chrome console because it only ever appears for a fraction of a second. When the user clicks on a link on the warning page, that is supposed to set a variable so that the phone knows not to redirect to the warning page next time the main page is shown. But every time it does redirect to the warning page, and I can't tell why it keeps doing this. I'm trying to debug it, but the console messages that I have inserted never seem to appear. Maybe they are there for such a short time that I can't see them. Anyway my code is below. Can anyone help?

Thanks

In init.js:

 redirectformobile();
 
 function redirectformobile()
 {
 
if (screen.width < 1150)  {
	var amv = sessionStorage.getItem("amv");
	console.log (amv);
	if (amv !== true) {
		console.log ("redirected");
	window.location = 'sorry.html';}
} 
 }

In the warning page:

<body>
	<div class="outer">
        <span>
        Sorry, this is a web application and it requires too much screen space to be displayed well on your device.<br><br>
        <span>Please use a pc instead to view it.<a href="javascript:history.back()"> Go back.</a></span><br><br>
		<span>If you would nonetheless like to view the application on your device, please click here. Operation will be difficult!<a onclick="allowmobileview()" href="index.php"> Take me to the site anyway.</a></span>
        </span>
    </div>
</div>

<script>
	function allowmobileview(){
		sessionStorage.setItem("amv", true);
	}
</script>

dsonesuk · July 26, 2022

The way I checked if device is mobile is to check if it supports touchscreen, which was a good few years ago.

Arbu · July 27, 2022

23 hours ago, dsonesuk said:

The way I checked if device is mobile is to check if it supports touchscreen, which was a good few years ago.

But the issue is the screen size, not whether it supports touchscreen. Tablets typically support touchscreen.

dsonesuk · July 27, 2022

I would have thought you would have to identify first if mobile, by checking if it supports touchscreen, then if you want, by device size as a desktop browser can be resized anyway.

I imagine a conflict between onclick event and the default action of clicking link itself, you may need to introduce a e.preventDefault() then after session set redirect.

Arbu · July 27, 2022

Well, if a desktop browser is resized, the application won't work on that either. So the test is for the screen width.

Anyway, my code seems to be working OK now:

if (screen.width < 1150)  {
	var amv2 = sessionStorage.getItem("amv");

	if (amv2 !== 'true') {

	window.location = 'sorry.html';}
	
};

It's in a script and I wanted to call it from other pages that don't include the whole script, but my function idea wouldn't work. Also the test for the variable amv2 being true required inverted commas around true to work. I don't know why. I set it to true, not 'true' after all.

And for debugging the script I can just add a line to throw an error, and get the Chrome console to break on all errors.

dsonesuk · July 27, 2022

Try

JSON.parse(amv2) !== true

Sign In

Debugging with the Chrome console

Recommended Posts

Arbu

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Arbu

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Arbu

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity