移動端調試神器（eruda）

時間 2021-08-13

標籤 javascript css html 前端 java jquery chrome npm 瀏覽器 ide 欄目無線简体版

原文原文鏈接

在平常的移動端開發時，通常都是試用chrome瀏覽器的移動端模式進行開發和調試，只有在chrome調試完成，沒有問題了纔會上到真機測試，移動端開發的一大問題就在於此，javascript

各類品牌各類型號手機，手機中各類類型的瀏覽器APP........還好移動端的相對一致點，可是每每都會有一些各類各樣的坑，這時候就蛋疼了，明明chrome調試工具中是正常的，css

一到某個瀏覽器中就炸了，怎麼辦，又沒法像在chrome中使用調試工具進行調試，只能經過alert()彈窗來調試，有什麼辦法能夠像PC上那樣清晰，可視化的調試呢？html

噔噔噔~撒花，今天無心中發現了一個炒雞酷炫的移動端調試工具 eruda, 有點歷史了；前端

　　Eruda 是一個專爲手機網頁前端設計的調試面板，相似 DevTools 的迷你版，其主要功能包括：捕獲 console 日誌、檢查元素狀態、顯示性能指標、捕獲XHR請求、顯示本地存儲和 Cookie 信息、瀏覽器特性檢測等等。java

<!DOCTYPE html>      
<html lang="en">      
<head>      
    <meta charset="UTF-8">      
    <title>移動端調試神器（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>
</div>  

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
  console.log('這個輸出在eruda以前，因此沒法捕獲到~');
</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';

    //添加下面的代碼須要在url裏填?eruda=true才能啓動eruda
    //if (!/eruda=true/.test(window.location)) return; 

    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();
</script>
<script type="text/javascript">
  console.log('這個輸出在eruda以後，成功捕獲！');
  $('#btn').on('click', function() {
    console.log('徐同保');
  });
</script>
</body>      
</html>