精华内容
下载资源
问答
  • 使用PC上的 Chrome 远程调试手机端的页面 工具准备 手机端:chrome for Android,; PC端:安装谷歌浏览器(最好是最新版的开发者版本) USB 连接线, 也就是你充电器的那条线 开启调试模式 使用 USB 连接你的电脑,...
  • 手机浏览器调试建议

    2015-09-11 23:22:00
    有时候要开发在手机浏览器上运行的网页,这样就涉及到要调试JS,在电脑上怎么模拟,跟使用真机还是有区别,这里介绍几种用电脑远程调试JS的方法。 1.使用google浏览器,因为安卓本来就是谷歌的,因此它本身对此有...

    使用电脑远程调试安卓手机上浏览器的JS

      (2014-01-14 22:44:04)
      
    有时候要开发在手机浏览器上运行的网页,这样就涉及到要调试JS,在电脑上怎么模拟,跟使用真机还是有区别,这里介绍几种用电脑远程调试JS的方法。
     
    1.使用google浏览器,因为安卓本来就是谷歌的,因此它本身对此有支持,开发了相关的插件
     1)首先,电脑上要有谷歌浏览器(Chrome),最好是最新版的(Chrome 31以上); 
     2)安装了安卓的SDK;
     3)手机上也安装谷歌浏览器(Chrome for android 31以上)
     4)电脑的浏览器上安装支持调试的插件adb
     5)确保手机可以通过USB数据线连接上电脑(如果不行,可以试试安装最新的手机驱动)
     6)手机开启USB调试模式
     7)用电脑打开Chrome浏览器,打开adb,点击view insepect
     8)手机用chrome打开要调试的页面
     9)在电脑的浏览器上,点击inspect,开始调试
     
    注意:该方法可能不需要sdk,但是安装了最好,同时该方法要连接外网才能实现调试
    参考网址:

    谷歌官网:

    https://developers.google.com/chrome-developer-tools/docs/remote-debugging

    网友总结:

    http://exodia.net/多终端/2013/06/22/响应式实践(1)移动端Web开发环境的搭建.html

     

    2.使用weinre来实现远程调试,Weinre的本意是Web Inspector Remote,它是一种远程调试工具。功能与FirebugWebkit inspector类似,可以帮助我们即时更改页面元素、样式,调试JS等。

      1)确保电脑安装了java 的jdk

      2)下载weinre的jar包,下载网址:http://ishare.iask.sina.com.cn/f/23607399.html,下载后(或解压),放在一个文件夹里就行

      3)运行cmd,在weinre所在文件夹的地址栏输入代码:java -jar weinre.jar --httpPort 8081 --boundHost -all- 

      4)打开本地浏览器,(使用webkit内核浏览器(chrome、safari))访问 http://localhost:8081/,不出意外的话可以看到weinre的基本信息。

      5)"debug client user interface"是weinre的Debug客户端,点击进入后可以看到目前还没有被测试的目标网页

      6)为了让需要调试的页面被weinre检测到,需要添加Debug Target

           需要在调试的页面中增加一个js

     

     

    参考网址:参考网址:

    http://www.cnblogs.com/hxh-hua/archive/2013/02/26/2933117.html

     

    注意:该方法在实际使用时不知为什么无效,但网上说可以,求解释

     

    3.使用UC浏览器开发者版来调试,UC浏览器做了一个开发者的版本,可以用于调试JS

      1)在网上搜索UC浏览器开发者版,然后下载安装在手机上

      2)连接手机可以使用USB或wifi,这里使用wifi连接

    3)本机电脑开启connectify,将自己电脑当作wifi,然后通过手机连接上去。如果电脑和手机是连接同一个wifi网络的话,也是可以

     4)在电脑上打开chrome浏览器,输入手机IP+9998,手机IP192.168.112.244,则输入192.168.112.244:9998

     5)在手机上打开UC浏览器开发者版,会提示是否允许远程调试,选择是

     6)开始调试

     

    转载于:https://www.cnblogs.com/skying555/p/4802335.html

    展开全文
  • 浏览器调试js调试

    万次阅读 多人点赞 2018-01-28 14:52:06
    现在的浏览器一般都给了我们调试js的功能,个人比较推荐使用google浏览器,他的调试结构清晰且强大,下面就来介绍一下google浏览器的调试功能 调试器界面 按下F12,你会发现弹出来一个窗口,并附着在当前页面,这...

    现在的浏览器一般都给了我们调试js的功能,个人比较推荐使用google浏览器,他的调试结构清晰且强大,下面就来介绍一下google浏览器的调试功能

    调试器界面

    按下F12,你会发现弹出来一个窗口,并附着在当前页面,这就是google浏览器的调试器,在该窗口中,你能找到有Elements\Console\Sources\Network….,前4个是常用的功能,如果你不习惯这个窗口的位置,你也可以调整它,你可以选择直接拖动该窗口,你也可以点右上方的三个点一样的按钮,来改变他的位置。

    这里写图片描述

    Console界面

    Console界面的环境与script标签的环境是一样的,你可以在这个里面直接编写JavaScript代码,能达到在script标签中编写js代码一样的效果,甚至在网页被打开之后,你还可以在console中动态控制dom结构

    //例如你可以在Console中写上
    var _div = document.createElement("div"):
    document.body.appendChild(_div);

    Elements界面

    这个选项卡中可以清晰的观察dom结构,甚至是css属性,js等等,当你只想观察页面的某一个特定区域的dom结构的时候,这时候你不需要一层一层的去展开,而是直接用左上角的按钮选中即可。

    Source

    这里面存放了资源文件,包括html页面,css,js等等,这里面最强大的功能之一就是,你找到一个js文件之后,打开,并可以在页面中设置断点,你只需要将页面中的某一行的数字标记就可以了

    这里写图片描述

    看到上面的24,就是我们所设置的断点。当我们刷新页面或者触发该事件的时候,页面执行就会停到这里,然后我们再观察下面这张图
    这里写图片描述

    在这里,你可以选中观察到红箭头指向的5个按钮。当你设置好断点开始运行的时候,

    • 第一个按钮就会变成一个三角形,当你点击该三角形开始运行的时候,程序就会自动一次性往下执行,直到运行到下一个断点的位置,若下面没有断点,它就会自动运行至结束。
    • 第二个按钮是逐过程执行,如果这一行调用了一个函数,也是一次性执行这个过程
    • 第三个按钮是也是逐过程执行,只是当这一行是一个函数的时候,他会自动跳转到函数内部的
    • 第四个按钮是跳出该函数
    • 第五个按钮,是忽略所有断点


      你会发现下面还有一个watch区域,点开之后,你会发现有一个+号,当你点击该符号,输入document.body的时候。你会发现,她能观察到这dom的结构,也就是说这个watch可以用来查看JavaScript对象

    Network选项卡

    该选项卡是观察网络信息的选项卡,这个选项卡是专门观察与服务器交互状态的选项卡,甚至你可以观察到服务器传递过来的数据和浏览器传输过去的数据,尤其在传输json数据的时候,它能很清晰的观察到json内部传输结构

    通过浏览器调试发现未知的API

    javascript的api这么多。我相信几乎没有人能够把它全部记住,但是你完全可以在浏览器中找到他们



    • 我现在在页面中创建了一个audio标签,我要设置为播放该首之后,立即就播放下一首,这时候,你不需要百度,你完全可以在浏览器中解决这个问题
    • 首先,我们肯定是要获取到这个dom对象的,获取到对象
      之后,我们希望能在他播放结束的时候,播放下一首,那么很简单的就会想到,要是提供了end方法就好了,我们只需要在end的时候,改变audio的src,然后再play它
    • 首先。我完全没有使用过这些api,那么我应该如何去发现他们呢?你只需要watch中输入document.getElementById(“这个audio的id”),然后并观察,发现真有一个play方法和onended方法,那么事件就简单了
        <audio controls="controls" autoplay="autoplay" id="a"></audio>
    
    <script>
        var a = document.getElementById("a");
        a.src = "许嵩 - 断桥残雪.mp3";
        a.onended = function(){
            a.src = "庐州月.mp3";
            a.play();
        };
    </script>

    浏览器的调试几乎是web开发必备的知识,希望能对大家有所帮助。。。

    展开全文
  • 如何使用狐火浏览器调试js

    1、先进入你要调试js的js所在的页面F12,弹出如下:


    展开全文
  • google浏览器调试javascript

    千次阅读 2012-11-10 08:51:03
    javascript调试,大家一般都是用alert来,以前我没有用google,firefox的时候,也是这样来调试的,后来发现firefox的firebug和google可以调试javascript,可以像Eclipse,VS一样设置断点,这样调试javascript确实方便...

    javascript调试,大家一般都是用alert来,以前我没有用google,firefox的时候,也是这样来调试的,后来发现firefox的firebug和google可以调试javascript,可以像Eclipse,VS一样设置断点,这样调试javascript确实方便多了。下面来给大家分享一下,怎么用google来调试javascript。

    第一步,打开(快捷键是F12)


    第二步,切换到sources选项,找到你要调试的文件(多个文件点击左边那个小三角,选择你要调试的文件)



    第三步,找到你要调试的语句,点击最左边,当出现一个蓝色的点的时候,说明断点设置成功。然后刷新页面,程序就开始调试了,到了断点外,程序会挂起。


    你也可以在你要调试的语句前面,点击右键,选择Add breakpoint,添加一个断点。下面步骤同上。




    调试基本操作说明,有跳转到下一个断点,单步执行,进入等等(如果大家看不清楚,可以在一个新页面中打开这张图片看)





    操作一:当遇到非内置方法时,点击右边中间那个按钮,是进入方法内部,快捷键是F11(我一直没有用成功过,可能和浏览器全屏的快捷键冲突了)



    操作二:单步执行的效果,单步执行的时候,当遇到一个方法的时候,不会进入该方法的内部实现中,快捷键(F10)




    操作三:当有设置多个断点的时候,可以点击,右边栏的最左边那个小三角,它会从当前位置跳到下一个断点



    大家还可以看右边栏的一些其它选项,里面有一些变量的信息,等等。


    展开全文
  • 【学习记录1】手机浏览器调试方法

    万次阅读 2018-01-24 11:11:01
    首先你的电脑安装了nodejs,npm 安装方法很简单:百度nodejs(window系统),下载exe文件,下一步下一步就会安装成功 第一步:安装: npm install spy-debugger...没有自动打开浏览器,就按命令行提示用浏览器打开相应地
  • Chrome 是 Google 出品的一款非常优秀的浏览器,其内置了开发者工具(Windows 系统中按下 F12 即可开启),可以让我们方便地对 JavaScript 代码进行调试。 为方便大家学习和使用,本文我对 Chrome 的调试技巧做个...
  • IDEA调试JavaScript代码
  • 利用chrome浏览器调试js断点

    千次阅读 2017-07-10 09:56:58
    断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了。操作起来似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们先看一个断点截图,以chr
  • 最近在爬取一个商城的商品信息玩,发现需要调试js代码获取参数加密方式,但是发现网上很多介绍使用Chrome调试js代码的文章豆不够详细,对第一次操作的人很不友好,所以自己写一篇,希望帮其他人节约点时间 但其请求的...
  • chrome浏览器调试JS代码

    千次阅读 2017-06-30 17:41:34
    是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容。嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的...
  • 主要介绍了浏览器调试动态js脚本的方法,文中给大家带来两种调试方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • google浏览器调试js

    千次阅读 2014-07-21 18:49:38
    在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于前端开发可谓神器。 在Chrome出来的时候,我就喜欢上它的简洁、快速,无论是启动速度还是...
  • vscode下使用chrome浏览器调试js

    千次阅读 2018-08-28 10:25:00
    因为之前写代码一直使用vitual studio开发,所以在调试javascript的时候也一直使用vitual studio进行调试,不得不说,vitual studio调试javascript确实很方便,之前一直不理解为什么网上说的其他调试js的工具中没有...
  • 使用Chrome浏览器调试js或者jQuery

    千次阅读 2018-11-22 14:45:41
    1:F12打开开发者模式 2:选中Sources 3:选中js所在的页面或直接选中js文件,然后打上断点,当程序执行到这里的时候会停下,就可以调试了 此外,在右侧还可以看到变量的值 ...
  • Js--如何使用浏览器调试js代码

    千次阅读 2018-07-04 20:20:15
    经常会遇到这样或者那样的问题,这个时候就需要调试,看看错误是出现在哪个位置,但是在JavaScript中,如果一直都是这样的去调试的话,那么必定会不是很方便,于是这个时候各种浏览器中自带的调试工具就出来了。...
  • 对于浏览器调试js,很多童鞋都感觉无从下手,这里在工作中有些整理,希望对大家有所帮助,文档写的不是太规范,请指教
  • 在使用360浏览器调试界面时,很是不便。注:chrome的JetBrains IDE Support 安装了,但chrome已经卸载。 1.将360浏览器加入: 打开webstorm的 “file”-》setting 菜单 选择Tools->web Browsers,里面没有...
  • 以下是从网上找到的拒绝alert调试js的方法,仅供大家参考。 我们平时用的最多的也就是微软的ie,火狐firefox,和google的chrome浏览器了,这3种都可以进行对页面的调试,这期我们重点看看如何对js进行调试,如果你还是...
  • 如何调试远程浏览器 当错误仅在远程浏览器中弹出时,这非常令人沮丧。 关于该用户,该设备或该环境的... RemoteJS是一项免费服务,您可以在其中将简化JavaScript调试器附加到远程浏览器调试器提供了一个远程...
  • 360浏览器如何调试js?javascript简称JS,是网页的前端开发语言,直接运行在浏览器上,以前我刚开始学的时候,并不懂这个,所以我每次开发或调试它,都是在vs.net里面,现在想想,实在是太痛苦了,其实JS是执行在浏览器的,而...
  • 用开发工具一般都无法调试页面,当js出问题的时候都很难查不出来,特别当浏览器不兼容或者例如jQuery版本的问题,这时候需要用到浏览器自带的调试工具(通用的都是F12), 首先看看IE,主要用到HTML ,脚本 HTML 用的...
  • Google浏览器调试JS代码【F12】

    千次阅读 2019-02-22 09:27:04
    浏览器里面debug
  • vConsole github地址 vConsole 是腾讯开源的项目,这就简单的介绍一下使用 使用npm引入vconsole.min...script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script&
  • 1.背景 Android移动端浏览器环境验证与测试,可使用vConsole[1], ...控制台调试js,观察网络面板及性能面板等。 在国内使用chrome调试需要翻墙,否则会出现404页面,无法 调试,使用不便。因此若能有一种和chrom...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 131,606
精华内容 52,642
关键字:

手机浏览器调试js