美文网首页
关于手机web页面的调试

关于手机web页面的调试

作者: Nelson_sylar | 来源:发表于2018-12-27 14:22 被阅读0次

开发手机页面的调试

在开发手机页面时,由于手机浏览器通常没有开发者工具,应该如何来调试呢?

  1. 巧用window.alert()作为断点来代替console.log()
  2. 自己写一个phoneconsole,巧用window.onerror事件
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .console{
      position:fixed;
      width:100%;
      bottom:0;
      height:120px;
      background: #ddd;
    }
  </style>
</head>
<body>
<div class="console">
  控制台
  <div id=mylog></div>
  <div id="myerror"></div>
</div>
  <script>
    window.phoneconsole={
      error(){
        window.onerror = function(message, source, lineno, colno, error){
 myerror.innerText='message'+ message+'\n'+'line&row:'+lineno+' '+colno+'\n'+'error'+error
}  
      },
      log(content){
            mylog.innerText='log:'+ content
          }
    }
     phoneconsole.error()
     phoneconsole.log(123)
    //let e=a   这里出了错就会显示
  </script>
</body>
</html>
页面底部就会有个浮动的console
  1. 用别人的库吧
    vconsole
    vconsole

相关文章

  • 关于手机web页面的调试

    开发手机页面的调试 在开发手机页面时,由于手机浏览器通常没有开发者工具,应该如何来调试呢? 巧用window.al...

  • 苹果手机调试工具safari

    在移动web开发过程中,需要经常考虑调试的问题,以下将对如何在苹果手机的safari浏览器上调试H5页面进行介绍。...

  • 前端|本地调试H5页面方案总结

    摘要 详细讲述微信H5页面调试(安装在安卓或iOS手机上的),钉钉内H5页面的调试,QQ、微博以及各浏览器上H5页...

  • 远程调试手机页面工具:Weinre 介绍

    Weinre(全称Web Inspector Remote)是一款的可以在电脑上远程调试手机页面的工具。 通过We...

  • 2018-10-16移动设备兼容性

    移动设备h5 web网站手机H5页面的区别 分辨率不同,web端为宽屏,手机端为窄平移动设备兼容测试的问题 买手机...

  • 移动端布局

    一、移动端调试方法1、Chrome DevTools(谷歌浏览器)的模拟手机调试。2、搭建本地web服务器,手机和...

  • 移动端H5测试方案分析

    按平台不同,web调试可以分为桌面web调试和移动端web调试两种,其中用到的调试方法也有所不同。 桌面web调试...

  • web前端如何入门学习?需要掌握什么姿势?

    初学者更快入门web前端,以下是关于web前端方面的教程知识点。web前端是app开发、h5网页等主流的程序语言,...

  • web前端开发小白快速入门的10个方法

    10种方式助初学者更快入门web前端,以下是关于web前端方面的教程知识点。web前端是app开发、h5网页等主流...

  • 8. SPA( 单页)

    SPA,单页Web应用(single page web application,SPA),就是只有一张Web页面的...

网友评论

      本文标题:关于手机web页面的调试

      本文链接:https://www.haomeiwen.com/subject/squrlqtx.html