In the daily mobile terminal development, we usually try chrome’s mobile terminal mode for development and debugging. Only after Chrome debugging is completed and there is no problem, we will go to the real machine test. A big problem of mobile terminal development lies in this.

Various brands and models of mobile phones, various types of browser APP in mobile phones…….. Fortunately, mobile is relatively consistent, but there are often a variety of pits, this time the pain, obviously chrome debugging tool is normal,

As soon as a browser is exploded, how to do, and can not use the debugging tool in Chrome debugging, can only be through the alert() popover to debug, what can be as clear as the PC, visual debugging?

 

Deng Deng ~ Sa hua, today I accidentally found a cool mobile debugging tool eruda for fried chicken, a little history;

Eruda is a debug panel designed for the mobile web front end. It’s like a mini version of DevTools. It captures console logs, checks element status, displays performance metrics, captures XHR requests, displays local storage and Cookie information, checks browser features, and more.

<! DOCTYPEhtml>      
<html lang="en">      
<head>      
    <meta charset="UTF-8">      
    <title>Mobile Debugging Artifact (ERUDA)</title>    
    <style type="text/css">  
      .test{background: green; }.one{display: inline-block; width:100px;height: 100px;background: #ddd; }.two{display: inline-block; width:100px;height: 100px;background: # 666; }</style>     
</head>      
<body>

<div class="test">
  <div class="one">1</div>
  <div class="two">2</div>
  <button id="btn">button</button>
</div>  

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
  console.log('This output precedes eruda, so cannot capture ~');
</script>
<script type="text/javascript">
(function () {
    //var src = 'http://eruda.liriliri.io/eruda.min.js';
    //var src = 'https://cdn.jsdelivr.net/npm/eruda';
    var src = 'https://cdn.bootcss.com/eruda/1.3.2/eruda.min.js';

    // Add the following code to the url? Eruda is enabled only when erUDA =true
    //if (! /eruda=true/.test(window.location)) return;

    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();  + 'ipt>'); }) ();</script>
<script type="text/javascript">
  console.log('This output was captured successfully after Eruda! ');
  $('#btn').on('click'.function() {
    console.log('Xu Tongbao');
  });
</script>
</body>      
</html> 
Copy the code



\

\

\

\

Note: Welcome to join the web front-end job hunting qq group: 668352707\

\