精华内容
下载资源
问答
  • VSCode调试网页JavaScript代码

    千次阅读 2018-12-03 13:02:30
    文章目录一、调试准备二、调试配置2.1、Launch配置2.2、Attach配置三、在IDE上调试JS的配置参考文献 一、调试准备 Windows10 64bits IDE:Visual Studio Code1.28.2 安装插件:Chrome(安装方法:Debug -&gt...

    一、调试准备

    Windows10 64bits
    IDE:Visual Studio Code1.28.2
    安装插件:Chrome(安装方法:Debug -> Install Additional Debuggers… -> Debugger for Chrome,重新启动vscode即可。)

    二、调试配置

    首先该插件运行需要安装有本地服务器,其次有两种配置方式,分别为:
    (1)launch:重新打开一个chrome来显示应用程序
    (2)attach:在已经运行的chrome中显示应用程序

    2.1、Launch配置

    按F5并选择chrome进入配置文件launch.json,我的Launch配置如下所示:

    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost/文件路径",
            "webRoot": "${workspaceFolder}"
        }
    ]
    

    2.2、Attach配置

    attach的launch.json配置如下所示:

    {
        "type": "chrome",
        "request": "attach",
        "name": "Attach to Chrome",
        "port": 9222,
        "sourceMaps": true,
        "webRoot": "${workspaceFolder}"
    }
    

    步骤一:让chrome进入调试模式:

     方法一:在命令行中进行设置:
    
    路径/chrome.exe --remote-debugging-port=9222
    
     方法二:chrome桌面图标右键 -> 属性 -> 目标 -> 在路径后面添加 --remote-debugging-port=9222 即可。
    

    其中 --remote-debugging-port 的值与lanuch.json中的 port 的值要匹配。然后在浏览器中打开本地服务器上的web页面
    步骤二:在vscode中打开调试按钮进行调试,即可进入调试模式。
    在这里插入图片描述

    三、在IDE上调试JS的配置

    "version": "0.2.0",
    "configurations": [
         {
             "type": "node",
             "request": "launch",
             "name": "Launch Program",
             "program": "${workspaceFolder}/WindowExample.js"
          }
    ]
    

    参考文献

    [1]官网配置教程

    展开全文
  • 一、调试准备 Windows10 64bits IDE:Visual Studio Code1.28.2 安装插件:Chrome(安装方法:Debug -> Install Additional Debuggers… -> Debugger for Chrome,重新启动vscode即可。) 二、调试配置 首先该...
  • 对于网页代码调试方法

    千次阅读 2018-08-07 18:21:17
    那么针对网页的编程我们来说一下怎样去调试我们的代码。 一般来说有3种方法可以供我们去调试我们的代码哦~ 使用调试语句来进行调试 所谓调试语句就是一些简单的显示语句,比如 alert("------"); ...

    一般来说代码出现错误是非常让人头秃的一件事。那么针对网页的编程我们来说一下怎样去调试我们的代码。
    一般来说有3种方法可以供我们去调试我们的代码哦~

    1. 使用调试语句来进行调试
      所谓调试语句就是一些简单的显示语句,比如
    alert("------");
    

    可以进行调试找出错误位置,
    具体行为就是在大致错误的区域进行添加调试语句,如果语句可以运行并且显示就代表着调试语句之前的代码都没有出错,(反之就是代表着前面的代码中出现错误)在错误代码重复此步骤即可找到错误代码位置了。

    2.可以使用浏览器自带的检查工具进行调试
    方法是首先在浏览器 中执行代码,如果出现错误,鼠标右键点击选区最下方的***检查***就可以打开开发者工具栏了(或者谷歌浏览器可以直接F12进入调试界面)。进入到console组件界面,如图:
    这里写图片描述
    如果代码有编辑错误,会显示具体哪一行出错,点击错误提示就可以进入到组件代码显示。

    3.使用开发者工具的sours组件界面进行调试
    主要用在consol不报错的未知错误,相比于前两种方法更高大上了哈哈~
    主要就是点击文件夹在sours组件界面打开代码,然后可以通过点击代码的行数来控制运行停止位置。如图:
    这里写图片描述
    表示我可以让代码运行到第18行停止,然后你可以结合前两种方法对代码进行调试。
    好了,调试除了方法,更重要的是耐心啦实在自己调试不出来的的时候可以让你的小伙伴来帮忙哦

    展开全文
  • vConsole github地址 vConsole 是腾讯开源的项目,这就简单的介绍一下使用 使用npm引入vconsole.min.js 下载 vConsole 的最新版本。(不要直接下载 dev 分支下的 dist/vconsole.min.js) 或者使用 npm 安装: ...

    vConsole github地址
    vConsole 是腾讯开源的项目,这就简单的介绍一下使用

    使用npm引入vconsole.min.js

    下载 vConsole 的最新版本。(不要直接下载 dev 分支下的 dist/vconsole.min.js)

    或者使用 npm 安装:

    <script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
    
    <script>
        // 初始化
        var vConsole = new VConsole();
        console.log('Hello world');
    </script>

     手机的浏览器会有一个console 按钮,可以点开查看

    展开全文
  • 手机网页调试方法

    千次阅读 2018-08-04 16:38:28
    如果出现类似下图:(框里是你要调试的地址,并且颜色是绿色的)!那么恭喜你成功了!说明链接成功,可以像浏览器查看元素一样的调试了 如果链接不上,检查一下步骤,然后在刷新俩端的浏览器试试

    首先你的电脑安装了nodejs,npm

    安装方法很简单:百度nodejs(window系统),下载exe文件,下一步下一步就会安装成功

    第一步:安装: npm install spy-debugger -g

    第二步:手机和 PC 保持在同一网络下(比如同时连到一个Wi-Fi下)
     

    第三步:命令行输入:spy-debugger

    没有自动打开浏览器,就按命令行提示用浏览器打开相应地址。

    浏览器打开画面如下图:

    第四步:设置手机的 HTTP 代理,代理 IP 地址设置为 PC 的 IP 地址,端口为spy-debugger的启动端口号(也就是第三里红框里的数字)。
     

    第五步:用手机浏览器访问你要调试的页面即可。任何浏览器都行(亲测QQ浏览器,安卓手机自带浏览器,微信内置浏览器可用)

     

    如果出现类似下图:(框里是你要调试的地址,并且颜色是绿色的)!那么恭喜你成功了!说明链接成功,可以像浏览器查看元素一样的调试了

    如果链接不上,检查一下步骤,然后在刷新俩端的浏览器试试

    展开全文
  • 网页代码调试

    2013-05-01 14:27:20
    网页代码调试
  • 如何用浏览器调试网页前端代码

    千次阅读 2019-09-18 15:24:34
    首先简要介绍浏览器的调试器的组成 按F12快速打开调试
  • 运行此代码可以让您更轻松地找到自己所需要的网页背景色彩代号,从容自如地调试网页背景色!
  • 当我们需要调试网页上的 JS 代码时,可以使用 Chrome 游览器上的开发者工具的 Sources 项进行断点调试。 在代码数目栏处点击,即可加上断点,根据加入的断点进行判断,该断点若是事件触发的可不用刷新界面,代码...
  • 调试项目的时候,当停止调试的时候,端口就被断了。之前以为是IIS那边的控制问题,但是其他并行的项目运行都没有出现这种情况。 最初也没在意,直到现在实在忍受不了了,每次重开也太烦了。就去各种觉得靠谱的...
  • 在线替换并调试网页上的 JS 代码

    千次阅读 2019-07-16 13:30:00
    https://blog.csdn.net/zwt520123/article/details/80374952 转载于:https://www.cnblogs.com/feifeicui/p/11194313.html
  • 专用ASP代码调试工具

    2013-07-25 21:41:24
    asp代码调试工具,把它放到你的asp文件所在文件夹中就可以使用了.不再安装麻烦的IIS就可以调试asp代码为你省去很多麻烦
  • 如何最快速的找到页面某一元素所绑定的点击事件,并查看js代码 该文转载而来,作者是jmd88888888 https://blog.csdn.net/jmd88888888/article/details/70919378
  • phpstorm远程网页调试,解决线上的问题无法调试的问题,能够更好的在线调试代码 phpstorm远程debug,可以解决一些windows系统上无法安装的插件的调试,例如swoole,ffmpeg,imagick等
  • Python代码调试

    千次阅读 2018-11-01 14:15:28
    有的bug很简单,看看错误信息就知道,有的bug很复杂,我们需要知道出错时,哪些变量的值是正确的,哪些变量的值是错误的,因此,需要一整套调试程序的手段来修复bug。 第一种方法简单直接粗暴有效,就是用print()把...
  • 打开浏览器任意一个页面,右键单击页面有两个很相似的选项:“查看网页代码(CTRL+U)”和"检查(审查元素F12或者CTRL+SHIFT+I)",之前一直认为这两项的代码内容没有区别,最近发现两者是有区别的。 二、网页中...
  • Sublime Text内调试JavaScript代码

    千次阅读 2017-11-13 15:16:46
    之前测试一段js代码是否可行,是直接将其安插在HTML文件中,或者使用浏览器提供的调试工具。最近开始使用sublime,所以想尝试在sublime环境下直接调试。 Sublime Text不支持JavaScript运行,需要添加Build System来...
  • 此工具在web开发中,查看源文件内存中的数据 调试非常好用,
  • Google浏览器调试前端代码

    千次阅读 2016-12-23 21:05:28
    特别不好发现错误,使得网页经常显示不出来。此时就体现出调试的重要性。下面我将结合图片为大家讲解如何调试 前端代码。 首先我先贴出测试用的小demo代码。 前端测试 function fuguo(){ var i;
  • Js--如何使用浏览器调试js代码

    千次阅读 2018-07-04 20:20:15
    大家用vs或者其他编程程序编程的时候,经常会遇到这样或者那样的问题,这个时候就需要调试,看看错误是出现在哪个位置,但是在JavaScript中,如果一直都是这样的去调试的话,那么必定会不是很方便,于是这个时候各种...
  • 网站地址
  • 怎样在F12下查看源码和调试网页CSS

    千次阅读 2021-04-06 16:21:49
    2、弹出的工具窗口中,默认选择是Dom Explorer功能,它会列出网页的源代码和CSS样式列表。 3、对定位到的文字修改CSS样式,添加inline style,比如把字体变为红色。 4、查看元素已经应用的CSS样式,点击"computed...
  • iphone查看网页代码Mobile Safari is a really great browser — it’s fast, easy to use, and has most of the features you might want. What it doesn’t have, however, is a good way to view the source ...
  • 手把手教你用Vscode Debugger调试代码

    千次阅读 2020-07-15 22:09:39
    手把手教你用Vscode Debugger调试代码 2018-05-19|工具 前言 一直觉得Vscode是前端开发最友好的IDE,里面内置的功能非常好用,无论是其拥有丰富的.
  • Google浏览器断点调试代码

    千次阅读 2018-09-08 22:54:51
    我是一个程序小白,在我学eclipse中java可以用短点来调试,很方便,也挺省心的,但是在我写javascript中,其实语句都差不多,但是我写代码的时候比较粗心,很容易出错,找了半天都找不出来,所以有个断点是很方便的...
  • vs调试时修改代码相应设置

    千次阅读 2018-01-03 11:16:34
    自行分析,新建解决方案,新建测试项目均不会出现此问题。...2、VS调试时,不能修改源代码的解决方案。如下图所示提示: 解决方案: (1)查看结果是和 “工具->选项->调试->编辑并继续->启用编辑并
  • 微信网页调试之利用vConsole真机调试

    万次阅读 2019-06-28 10:56:53
    虽然微信开发者工具可以调试大多数情况,但有些问题开发者工具没法调试,只能在真机里调试 真机调试有多重方式 第一种就是手机连接电脑结合Chrome的inspect进行USB远程调试,这个日后补充 第二种是开启vConsole,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 125,659
精华内容 50,263
关键字:

怎么调试网页代码