Luckchoco: Let's Program

2016年2月17日星期三

用Fiddler模擬慢速度的網路

因為需要測試手機APP在網路慢或不穩的情況下的執行狀況，但是網路不穩的環境去哪找呢？

其中一個方式是用手機開2G模擬，當然你的手機網路是要吃到飽的方案比較好。如果是桌機想要測試網路慢的情況，或是將筆電的網路分享給手機的時候，這時候，可以用Fiddler幫你降速。

選擇 Rules->Performance->勾選 Simulate Modem Speeds
就可以幫你懷念數據機時代的網路時光

如果想要嘗試更慢的速度
Rules->Customize Rules

會開啟一個純文字的文件，可以客製化你想要的設定

找到這段，修改成你想要的數字
儲存後，需要重新勾選Simulate Modem Speeds，設定才會生效
if (m_SimulateModem) {
            // Delay sends by 300ms per KB uploaded.
            oSession["request-trickle-delay"] = "300";
            // Delay receives by 150ms per KB downloaded.
            oSession["response-trickle-delay"] = "150";

        }

如果直接將m_SimulateModem設定為true，設定會直接生效
只是每次開啟fiddler，預設都會勾選 Simulate Modem Speeds
var m_SimulateModem:boolean=true;

如果想知道網路慢到什麼程度可以使用遠傳的測速網頁
當然因為網路很慢，所以要等很久，才會有結果
其他線上測速測不出來fiddler限速的結果，或是因為網路太慢，連測速網頁都無法跑
遠傳的測速網頁

網路限速測試，Fiddler的設定

if (m_SimulateModem) {
            // Delay sends by 300ms per KB uploaded.
            oSession["request-trickle-delay"] = "30000"; 
            // Delay receives by 150ms per KB downloaded.
            oSession["response-trickle-delay"] = "15000"; 

        }

測速結果

2016年2月5日星期五

Mac Air常常讀不到usb外接硬碟

已經將外接硬碟格式化成exFAT，每次讀取都要靠運氣，主要是當做Mac Air的資料備份用，畢竟Mac Air容量實在太小了。就算資料不小，也要備份啦。

用了n年之後，突然很好奇這個問題。因為正在做重要的備份，可承受不起資料丟失的風險。將備份硬碟連接另一台Windows筆電，讀取和儲存超穩定的，完全沒有壞掉的跡象。

好奇之下，上網查詢，原來是Mac Air供電量不足導致的。Mac Air使用USB外接硬碟，需要外接電源，供電量才會足夠。但是Mac Air的兩個USB孔差這麼遠，要外接電源，恐怕需要USB延長線吧。

可以參考這個網站關於Mac Air外接硬碟的說明

2016年2月4日星期四

桌上型電腦用Fiddler偵測手機網路流量

使用筆記型電腦偵測手機流量簡單多了，只要將筆記型電腦的網路分享給手機，在做一些相關的設定就可以了。

如果使用桌上型電腦，需要有可以將電腦的網路分享出去的裝置，除了無線網卡外，有些手機支援USB連接電腦，就可以讓手機使用電腦的網路的功能。這時候，再將這台手機的網路分享給另一台測試手機，這隻測試手機，就可以讓桌上型的Fiddler偵測到網路流量了。

方式一：無線網卡＋測試手機
方式二：可以USB上網的手機＋測試手機
為什麼需要兩台手機？因為手機網路需要設定proxy，USB上網無法設定proxy

USB無線網卡很便宜，就看看手邊剛好有什麼設備囉

這裡以紅米手機做示範，紅米剛好可以使用USB上網。
若要直接看Fiddler設定的話，請點選這裡

紅米機USB上網，紅米機當熱點分享網路
安裝小米助手
點選下圖按鈕，紅米機就可以使用USB上網了

點選"變身Wifi熱點"，紅米就變成無線基地台了

輸入想要顯示的wifi名稱和密碼

開啟測試手機的Wifi偵測功能，選擇紅米手機
測試手機就可以上網囉

Fiddler偵測手機網路流量
開啟Fiddler，選擇Tools->Fiddler Options

點選Connections頁籤，設定要監測的port
勾選 Allow remote computers to connect
Fiddler設定完成後，需要重新開啟，設定才會生效

接著需要設定測試手機
將測試手機使用電腦的Wifi上網，在Wifi列表長按網路名稱

點選"修改網路"

勾選"顯示進階選項"
Proxy設定選擇"手動"

輸入電腦IP和剛剛在Fiddler設定要偵測的Port
儲存後，Fiddler就可以偵測到手機的網路流量了

----------
Android利用Fiddler进行网络数据抓包

2016年2月2日星期二

JQuery Mobile效能緩慢的原因 $('#divID').trigger('create')

開發手機網頁的時候，將html、js、css、image等程式放在apk裡，讓WebView直接讀取apk裡的程式。測試的時候，卻發現手機越操作越慢。明明沒有執行什麼額外的程式。

最後發現是這個語法造成的 $('#divID').trigger('create')
將這個DIV裡的按鈕、List、下拉選單等一起初始化成，JQuery Mobile的樣式
將這一行註解掉，測試APP，發現網頁速度快很多

其他人也碰到這個問題

找到網路上的建議，把物件依照類別自己加上樣式初始化的語法，可以優化速度

按鈕 Button
$("input[type='button']").button();

列表 List
$('ul').listview();

下拉選單 Select
$("select").not("select[data-role='flipswitch']").selectmenu();

頁面區塊的縮合 Collapsible
$("div[data-role='collapsible']" ).collapsible();

群組按鈕 Controlgroup
$("fieldset[data-role='controlgroup']").controlgroup();

彈出視窗 Popup Window

$("#myPopupDiv").popup();

其他物件的初始化可以參考官網

每初始化一種物件，就測試一下速度。最後發現是這個造成的 $("#myPopupDiv").popup();

必須自己另外寫把DIV顯示和置中的語法

//初始化彈出視窗

$('#popupDivID').dPopup();

//關閉視窗

$('#popupDivID').dPopup('close');


JSBin

<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script>

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                                $(window).scrollLeft()) + "px");
    return this;
}

jQuery.fn.dPopup = function (ActionParam) {
      ActionParam=ActionParam||"";
   
   switch(ActionParam){
     case "close":
    $('#panelPopup').hide();
    $(this).hide();
    break;
    
  default:
   dismissibleStr="";
   if($(this).attr("data-dismissible")!=undefined){
      dismissibleStr=$(this).attr("data-dismissible");
   }
   
   if(dismissibleStr=="false"){
    $("#panelPopup").unbind('click');
   }else{
    popupObj=$(this);
    $("#panelPopup").unbind('click').bind('click', function () {
     $(popupObj).dPopup('close');
    });
   }
      $(this).find("fieldset[data-role='controlgroup']").controlgroup();
         $("#panelPopup").show();
      $(this).show();
      $(this).center();
      break;
   }

}

</script>
  <style>
    #panelPopup{
  z-index:999999998;
  position: absolute !important;
  left: 0px !important;
  top: 0px !important; 
  width:100%;
  height:100%;
  
  background: #252525 !important;
  filter:Alpha(Opacity=50) !important;
  opacity:0.5 !important;
}
.PopupStyle{
  background:white;
  border-radius: 8px;
  position: absolute !important;
  z-index:999999999;
}
  </style>
  <div id="panelPopup" style="display:none"></div>
  <div id="popupDivID" class="PopupStyle" style="display:none">
    123456<br/>7890<br/>
    <input type="button" onClick="$('#popupDivID').dPopup('close');" value="關閉"/>
  </div>
  <input type="button" onClick="$('#popupDivID').dPopup();" value="開啟視窗"/>
</body>
</html>

--------
DIV置中

2016年2月17日 星期三