Menu
I have this code loaded on my site
<!DOCTYPE html>
<html lang="en">
<head>
<title>fingerprinting</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>page loaded.</h1>
<h1 id="model"></h1>
<script type="text/javascript">
// console.log(window);
function getIPhoneModel() {
// Create a canvas element which can be used to retrieve information about the GPU.
var canvas = document.createElement("canvas");
if (canvas) {
var context = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
if (context) {
var info = context.getExtension("WEBGL_debug_renderer_info");
if (info) {
var renderer = context.getParameter(info.UNMASKED_RENDERER_WEBGL);
}
}
}
// iPhone X
if ((window.screen.height / window.screen.width == 812 / 375) && (window.devicePixelRatio == 3)) {
return "iPhone X";
} else if ((window.screen.height / window.screen.width == 896 / 414) && (window.devicePixelRatio == 3)) {
return "iPhone XS Max";
} else if ((window.screen.height / window.screen.width == 896 / 414) && (window.devicePixelRatio == 2)) {
return "iPhone XR";
} else if ((window.screen.height / window.screen.width == 1024 / 768) && (window.devicePixelRatio == 2)) {
return "iPad 4";
}
else if ((window.screen.height / window.screen.width == 736 / 414) && (window.devicePixelRatio == 3)) {
switch (renderer) {
default:
return "iPhone 6 Plus, 6s Plus, 7 Plus or 8 Plus";
case "Apple A8 GPU":
return "iPhone 6 Plus";
case "Apple A9 GPU":
return "iPhone 6s Plus";
case "Apple A10 GPU":
return "iPhone 7 Plus";
case "Apple A11 GPU":
return "iPhone 8 Plus";
}
// iPhone 6+/6s+/7+ and 8+ in zoom mode
} else if ((window.screen.height / window.screen.width == 667 / 375) && (window.devicePixelRatio == 3)) {
switch(renderer) {
default:
return "iPhone 6 Plus, 6s Plus, 7 Plus or 8 Plus (display zoom)";
case "Apple A8 GPU":
return "iPhone 6 Plus (display zoom)";
case "Apple A9 GPU":
return "iPhone 6s Plus (display zoom)";
case "Apple A10 GPU":
return "iPhone 7 Plus (display zoom)";
case "Apple A11 GPU":
return "iPhone 8 Plus (display zoom)";
}
// iPhone 6/6s/7 and 8
} else if ((window.screen.height / window.screen.width == 667 / 375) && (window.devicePixelRatio == 2)) {
switch(renderer) {
default:
return "iPhone 6, 6s, 7 or 8";
case "Apple A8 GPU":
return "iPhone 6";
case "Apple A9 GPU":
return "iPhone 6s";
case "Apple A10 GPU":
return "iPhone 7";
case "Apple A11 GPU":
return "iPhone 8";
}
// iPhone 5/5C/5s/SE or 6/6s/7 and 8 in zoom mode
} else if ((window.screen.height / window.screen.width == 1.775) && (window.devicePixelRatio == 2)) {
switch(renderer) {
default:
return "iPhone 5, 5C, 5S, SE or 6, 6s, 7 and 8 (display zoom)";
case "PowerVR SGX 543":
return "iPhone 5 or 5c";
case "Apple A7 GPU":
return "iPhone 5s";
case "Apple A8 GPU":
return "iPhone 6 (display zoom)";
case "Apple A9 GPU":
return "iPhone SE or 6s (display zoom)";
case "Apple A10 GPU":
return "iPhone 7 (display zoom)";
case "Apple A11 GPU":
return "iPhone 8 (display zoom)";
}
// iPhone 4/4s
} else if ((window.screen.height / window.screen.width == 1.5) && (window.devicePixelRatio == 2)) {
switch(renderer) {
default:
return "iPhone 4 or 4s";
case "PowerVR SGX 535":
return "iPhone 4";
case "PowerVR SGX 543":
return "iPhone 4s";
}
// iPhone 1/3G/3GS
} else if ((window.screen.height / window.screen.width == 1.5) && (window.devicePixelRatio == 1)) {
switch(renderer) {
default:
return "iPhone 1, 3G or 3GS";
case "ALP0298C05":
return "iPhone 3GS";
case "S5L8900":
return "iPhone 1, 3G";
}
} else {
return "Not an iPhone";
}
}
var model = getIPhoneModel()
console.log(model);
$('#model').text(model);
var currentUrl = window.location.href;
var newUrl = currentUrl.replace("fingerprinting", "fingerprinting/tasks");
// alert(newUrl);
$.ajax({
method: 'POST',
url: "{{ $APP_URL }}fingerprinting/store",
data: {'original_uri':'{!! $original_uri !!}', 'model' : model,},
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function(response){
console.log(response);
window.location.href = newUrl;
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(JSON.stringify(jqXHR));
console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
}
});
</script>
<h1>JS finished loaded.</h1>
</body>
</html>
I have Ajax in the bottom of the page. I am sure why is it not triggering on iPhone Safari. or maybe it is being executed, but there are some errors.
Note :
Ajax does not seem to trigger on iPhone Safari
Am I using any old syntax that Safari on iPhone not recognize ?
How would one go about and debug this further?
757
$. ajax({ url: "page. php", data: stuff, success: function(response){ console. log("success"); } });
The ajaxStop() method specifies a function to run when ALL AJAX requests have completed. When an AJAX request completes, jQuery checks if there are any more AJAX requests. The function specified with the ajaxStop() method will run if no other requests are pending.
The most simple method would be to add var ajaxTime= new Date(). getTime(); before the Ajax call and in the done get the current time to calculate how long the Ajax call took to make. var ajaxTime= new Date(). getTime(); $.
You can use the Safari WebInspector
You will need a Mac with Xcode installed.
You need to run your server locally on your ip.
Open your terminal and run ifconfig, find your ip and either copy enp1s0 for the ethernet or wlp2s0 for the wifi.
~ $ ifconfig
enp1s0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST> mtu 1500
inet 192.168.1.38 netmask 255.255.255.0 broadcast 192.168.1.255
wlp2s0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST> mtu 1500
inet 192.168.1.6 netmask 255.255.255.0 broadcast 192.168.1.255
run your server with your website on this ip.
With rails I run rails server -b 192.168.1.38 -p 3000, -b stands for ip binding and -p for port.
Open Xcode and start a new emulator or connect your device via usb.
Follow this instructions to open http://192.168.1.38:3000 on your iphone emulator.
In case you struggle configuring your iphone for debugging remember this important steps from the instructions:
Webinspector option needs to be enabled ONLY if you are using USB DEVICE. You don't need to flag this option on the simulator device. I don't have it on the simulator and I was able to run the webinspector.Develop in the menu bar by checking Show develop menu in menu bar.If you can’t see "Develop" in the menu bar, go to the menu bar and click "Safari > Preferences > Advanced" and select the "Show develop menu in menu bar" checkbox.
Develop -> Simulator or Iphone -> Your Page
In the developer toolbar open the Timelines/Network Request or Network as displayed in the guide to check your network request
Check your server logs to see if the backend is receiving the AJAX requests or check your phone simulator log as you may see some errors, related to certificates or other reasons. You'll have to research online for a solution to those errors.
when I build the project with xcode, I am also able to see the console log from from the phone inside xcode
190
From your question, I understand that you want to be able to debug on a mobile device rather than a desktop? If you are using an iPhone 7 or later, there is a WebInspector that can be turned on in the iPhone settings.
Go to Settings> Safari> Advanced (it's at the bottom of the screen) and there is a toggle there where you can turn your WebInspector on. This way you can read your console on your iPhone.
The 'WebInspector' was new with iPhone 7; older iPhones (6 or under) used a 'DebugConsole' which can be accessed in the same way through the Settings menu. The advantage of the WebInspector is that you can show the webinspector in your desktop safari when the iPhone is connected to your Mac. (Select 'Develop'>'Show WebInspector' from the Safari menu.
Both the debug console and web inspector are disabled by default so you need to enable them
hope this helps
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
