angularjs directive - What debugging tool to test image load on phone? -

i coding website loading lot of images.

i use bootstrap responsiveness, angular , javascript.

as can see here : www.carteldelart.com/article/messager, other articles referenced thumbnail image load using directive draw image following code :

app.directive("messager", function(){     return function(scope, element){         angular.element(document).ready(function(){             // on récupère l'élément             var myurl = "myurl";             var thumbnail_canvas = document.createelement('canvas');             thumbnail_canvas.width = 125;             thumbnail_canvas.height = 125;              var imagetmp = new image();             imagetmp.crossorigin = "anonymous";              imagetmp.onload = function(){                 thumbnail_canvas.getcontext('2d').drawimage(imagetmp, 6, 0, 794, 794, 0, 0, 125, 125);                 document.getelementbyid("messager").style.backgroundimage = "url("+thumbnail_canvas.todataurl()+")";             }             imagetmp.src = myurl;         });     } }); 

the page , images loads well, chrome testing tools seems things going on phones well.

but, when load page on actual phone, size of loaded image not 1 of images!

i'd debbug on phone. know tool this?

have experienced behaviour?

two aspects in question :

1. debug tool ios.
2. correctly display images on ios devices.

1. debug tool

open ios simulator xcode. on safari, load webpage tested. safari, development menu, click on ios simulator > page loaded. ios simulator, reload webpage. go safari logs after webpage runned.

2. correctly display images on ios devices.

some reduced images not vertically scale right presented on question. due limitation safari impacting device devicepixelratio > 1.

the solution detect "vertical squash" parameters inside image redraw different vertical squash parameters.

the solution problem embed stomita ios-image-megapixel library when loading image : https://github.com/stomita/ios-imagefile-megapixel