最近忙著實現安卓APP和小程式的產品，同時研究實時音視訊、直播、人臉識別、聲紋識別等功能開發，綜合體驗了各種設計思路，感覺受益頗多。豐富的開發內容很有意思，思路也更加活躍，後續有時間了會推出相關文章分享經驗。

除錯時常會需要列印資料，為了將資料和內容放在一個頁面對照看，實現瞭如下效果：

分享這段程式碼，直接可用（一切盡在程式碼與註解中）：

  function arrayView($data){
    // script指令碼彈窗渲染，建議用let替代var，詳見ES6
    return "<script>
        let w=window.screen.availWidth;
        let h=window.screen.availHeight;
        let leftdist=window.screenLeft+w*0.65;
        let topdist=(window.screenTop+h*0.025);
        let win=window.open('about:blank','_blank','width='+w*0.3+',height='+h*0.9+',left='+leftdist+',top='+topdist);
        win.document.title='PHP-ArrayView by PZN'
        win.document.body.innerHTML='<div><span style=\"font-size:18px;font-weight:600;color:#e7c89c\">thisData</span> : ".arrToHtml($data)."</div>'
    </script>";
  }
  function arrToHtml($data){
    $str='<i style="color: #2196f3;font-size:12px">array['.count($data).']</i><div style="margin-left:30px;word-break:break-all">';
    foreach ($data as $k => $v) {
        // 夾雜了許多html渲染語法，不要受影響，其實核心就是判斷陣列還是字串，然後回撥
        is_array($v) ? $str.='<span style="color: #e7c855;">'.$k.'</span> : '.arrToHtml($v) : $str.='<div>'.$k.' : '.$v.',</div>';
    }
    return $str.'</div>';
  }
 

若在框架的類中可能方法定義和指向需要稍作修改，最後呼叫即可。

測試資料：

$data=json_decode('{"code":0,"message":"OK","data":{"session_id":"","image_height":923,"image_width":690,"face":[{"face_id":"2663720011028259582","x":183,"y":261,"height":337.0,"width":337.0,"pitch":-1,"roll":-1,"yaw":0,"age":19,"gender":99,"glass":true,"expression":0,"glasses":1,"mask":0,"hat":0,"beauty":76,"face_shape":{"face_profile":[{"x":214,"y":350},{"x":212,"y":381},{"x":213,"y":412},{"x":216,"y":443},{"x":222,"y":474},{"x":233,"y":503},{"x":248,"y":530},{"x":269,"y":553},{"x":293,"y":572},{"x":321,"y":587},{"x":351,"y":592},{"x":382,"y":587},{"x":410,"y":574},{"x":435,"y":555},{"x":457,"y":533},{"x":473,"y":507},{"x":485,"y":478},{"x":492,"y":448},{"x":497,"y":418},{"x":499,"y":387},{"x":499,"y":359}],"left_eye":[{"x":261,"y":351},{"x":273,"y":357},{"x":286,"y":358},{"x":300,"y":356},{"x":313,"y":352},{"x":302,"y":341},{"x":287,"y":338},{"x":272,"y":341}],"right_eye":[{"x":443,"y":354},{"x":431,"y":359},{"x":418,"y":360},{"x":404,"y":358},{"x":392,"y":353},{"x":403,"y":344},{"x":417,"y":341},{"x":432,"y":344}],"left_eyebrow":[{"x":241,"y":320},{"x":262,"y":318},{"x":283,"y":318},{"x":304,"y":319},{"x":325,"y":319},{"x":307,"y":305},{"x":283,"y":302},{"x":260,"y":305}],"right_eyebrow":[{"x":467,"y":329},{"x":445,"y":326},{"x":423,"y":325},{"x":400,"y":325},{"x":378,"y":324},{"x":398,"y":310},{"x":424,"y":307},{"x":449,"y":311}],"mouth":[{"x":305,"y":501},{"x":317,"y":515},{"x":333,"y":524},{"x":352,"y":527},{"x":370,"y":525},{"x":387,"y":516},{"x":400,"y":503},{"x":385,"y":489},{"x":368,"y":479},{"x":353,"y":483},{"x":337,"y":478},{"x":320,"y":487},{"x":321,"y":501},{"x":336,"y":502},{"x":352,"y":503},{"x":368,"y":502},{"x":384,"y":502},{"x":384,"y":499},{"x":368,"y":498},{"x":352,"y":498},{"x":337,"y":497},{"x":321,"y":498}],"nose":[{"x":353,"y":419},{"x":353,"y":354},{"x":342,"y":373},{"x":332,"y":392},{"x":321,"y":411},{"x":308,"y":434},{"x":331,"y":446},{"x":351,"y":449},{"x":371,"y":448},{"x":394,"y":437},{"x":383,"y":413},{"x":373,"y":393},{"x":363,"y":374}]}}]}}',true);