title: What debugging tool to test image load on phone?
body: <p>i am currently coding a website loading a lot of images.</p>
  
  <p>I use Bootstrap for responsiveness, Angular and javascript.</p>
  
  <p>As you can see here : www.carteldelart.com/article/messager, the other articles are referenced with a thumbnail image i load using a directive that draw an image with the following code : </p>
  
  <pre><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;
          });
      }
  });
  </code></pre>
  
  <p>The page and images loads well, the chrome testing tools seems things are going well on phones as well. </p>
  
  <p>BUT, when i load the page on an actual phone, the size of the loaded image is not the good one for some of the images!</p>
  
  <p><a href="https://i.stack.imgur.com/MgYPR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MgYPR.png" alt="enter image description here"></a></p>
  
  <p>I'd like to debbug on my phone. Do you know any tool for this?</p>
  
  <p>Have you experienced that behaviour?</p>