精华内容
下载资源
问答
  • Chrome浏览器是工程师开发页面,查阅代码编写效果的有力工具。不建议在可视化菜单中,调用。直接F12快捷键,目前Chrome同时支持,...Console的类目,立哥在实际的调试中用的运用不是很多。主要用来查看框架架构。在...

    1.Chrome浏览器是工程师开发页面,查阅代码编写效果的有力工具。不建议在可视化菜单中,调用。直接F12快捷键,目前Chrome同时支持,PC端与移动端的审阅。

    2.Element汲取

    校验div 、js、CSS代码效果,采用吸管工具,汲取相关element参数。确定实现的代码是否被服务器端渲染(目前比较流行SSR) ,DOM被Chrome解析。在模仿其他页面,也可以模拟参数,实现仿站。

       

    3.Console部分

    Console的类目,立哥在实际的调试中用的运用不是很多。主要用来查看框架架构。在这个开源飞速发展,前端工具指数级大爆发的背景下,Framework 早已褪去了神秘的外衣,业内主流前端开发运用VUE和React ,它们代码效率高,分层清晰,前后端数据互绑,开发便捷,社区支持良好。对于前端开发人员,并不要多深入了解底层技术,Ajax与JSON是掌握重点。通过Console,看看重要的Component有没有缺失,自己单位二次开发的框架,主要用了哪些功能,添加了哪些轮子。

     

     

     

    4.Source类目

    Source是Chrome调试的核心。支持断点调试,所有的代码以及打包后的显示,在这个类目里都有。可以说和VS code 里的分层代码是相映成辉,对于理解代码,确定是否存在代码冗余,有非常好的效果。Webpack等打包也在这个部分里,如果需要Build调参等,积极使用。

     

     

    5.Network

    目前各种B/S架构在软件行业运用及其广泛,这个类目就是用来测网速的,本地的话,还可以测试组件之间通讯。没有什么特别需要说的,按照项目要求,随时调试。

     

     

     

    6.Application

    对于大型项目,application 是非常重要的工具,可以在线查看API与DB的情况。现在虽然进入大前端的时代,但是后台调参仍必不可少。开发者,可以看下,在浏览器端的,出参,入参基本情况,相关层次架构。

     

     

     

    7.VUE工具

    这是大杀器,好用到起飞。如果不会自己安装,请私聊立哥。凡是用VUE类的框架,都可以使用。对于整体组件,Events等各种重要部分都有安装。具体功能就不多讲,自己慢慢探索,谁用谁知道。

     

     

    展开全文
  • 前端如何进行调试

    千次阅读 2020-12-23 17:47:59
    一.为什么需要调试 解决bug通常要对代码进行调试,这样才能比较... 查看console.log(...)打印出的日志应该是目前大多数前端惯用的调试方法。但是这种方式对于缕清程序运行的步骤和过程来说是比较困难的。 比如,我要

    一.为什么需要调试

    解决bug通常要对代码进行调试,这样才能比较容易的找出关键性问题。掌握一个好的调试技巧是一个开发人员必备的基本技能。

    二.基本调试(pc端)

    这里我们拿一套iview-admin 的源码来进行调试

    1.肉眼调试

    所谓肉眼调试就是指直接看代码进行调试,这种方式效率非常低下。

    2.console

    • log(...)

      查看console.log(...)打印出的日志应该是目前大多数前端惯用的调试方法。但是这种方式对于缕清程序运行的步骤和过程来说是比较困难的。

      比如,我要查看一个函数被调用的位置,这就比较难找出。查看下面代码

    我们需要找到 updateMenulist() 被调用了几次,在哪被调用的。当然,被调用了几次我们很容易查看,只需要在函数内打印一下即可。

    浏览器控制台中就会显示出来

    但是我们想知道它是在哪里被调用的,这时我们会想到,直接在文件夹里搜索这个函数不就可以了吗,如

    • 搜索到的结果是有4个地方调用了这个函数,但是控制台里只打印了两次,那么,继续往下看。

    • trace(...)

      这个console.trace()的概述是:向Web控制台输出一个堆栈跟踪。意思就是打印当前执行位置到console.trace()的路径信息.使用console.trace()可以打印出详细的调用堆栈:

       

    3.断点调试

    如果是使用webpack打包了需要将打开map模式,否则断点断不到具体文件。

     

    4.vscode 调试

    使用vscode的朋友们可以很方便的在vscode上面进行调试

     

    5.chrome 插件调试

    首先,下载vscode 插件

     

    debugger for chrome

     

     

    然后点击调试按钮

     

     

    找到你的项目添加配置

     

     

     

    如我的是MyApp,点击添加

    然后会跳到一个文件里

     

     

     

    将url改成你的项目开发环境调试的地址, 然后 驱动项目 一般的启动命令配置都是 npm run dev,具体的启动命令自行查看package.json文件中。

    启动完成之后 按f5启动 chorme调试,这样就可以在 vscode 中打断点进行调试了。

    6.vue devTools

    vue devTools 使用chrome内核的浏览器可以下载vue devTools拓展来调试vue单页应用,这使得vue项目调试起来非常的方面。

    安装地址

    如我写的一个后台管理的vue页面。启动项目后。

     

    • 浏览器中断点

      之前我们console.log()打印的时候,后面会出现打印的具体文件位置。

    • 点击之后会跳到这个文件的具体位置。之后点击我箭头所指的位置就断点了

    • 之后就可以按F5刷新断点调试了,程序运行到这个地方会被卡住,然后你就可以查看当前的环境中的一些信息,如下

    • 查看调用栈

       

       

      我们可以很明显的查看函数第一次是在main.js的34行调用的。

      然后我们可以按下F11或者:

       

       

      于是我们再次点击,就又跳到了第二次执行这个函数的地方。

       

       

    • 代码中的断点

      有时候我们不想用console.log()去打印然后在浏览器中找到文件设置断点,那还有一种方法可以快速的实现断点

      使用 debugger 关键之

      在代码中直接使用 debugger 关键字可以快速的实现断点。

       

       

      效果和浏览器中的断点效果是一样的。

    • 配置launch.json

      在项目根目录配置.vscode文件夹。下有个launch.json文件

      文件内容

      {
          // 使用 IntelliSense 了解相关属性。 
          // 悬停以查看现有属性的描述。
          // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
          "version": "0.2.0",
          "configurations": [
              {
                  "type": "node",
                  "request": "launch",
                  "name": "启动程序",
                  "program": "${workspaceFolder}/HT/javascript/test.js"
              }
          ]
      }
      复制代码

      点击F5或者:

       

       

      关于vscode 调试的 查阅 go.microsoft.com/fwlink/?lin… 一般是进行服务端后台开发的用vscode调试的比较多。

    然后按f12打开开发者工具,找到我们工具栏中的vue选项。于是乎便能清晰的看到我们的vue组件。

     

     

     

    二.DOM调试

    1.Event Listener Breakpoints(事件监听器断点)

    当有事件被触发的时候,事件监听器会断点到具体的事件位置。

    例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
        <div id="cli">测试点击</div>
    </body>
    
    <script>
      var cli = document.querySelector("#cli");
      cli.addEventListener("click", function(){
        console.log("点击了")
      })
    
    </script>
    
    </html>
    复制代码

    在浏览器中打开文件,然后按f12找到sources选项卡,比如我要监听点击事件。选择mouse将click打上钩。

     

     

     

    然后我们测试点击事件。便可以发现事件被拦截了。

     

     

     

    2.Dom breakpoints

    subtree modifications : 当子节点发生变化的时候发生断点 attribute modifications : 当属性发生变法的时候触发断点 node removal : 当元素被移除的时候发生断点

    XHR断点的强大之处是可以自定义断点规则,这就意味着我们可以针对某一批、某一个,乃至所有异步请求进行断点设置,非常强大。但是,似乎这个功能在日常开发中用得并不多,至少我用得不多。想想原因大概有两点:其一,这类型的断点调试需求在日常业务中本身涉及不多;其二,现阶段的前端开发大多基于JS框架进行,最基本的jQuery也已经对Ajax进行了良好封装,极少有人自己封装Ajax方法,而项目为了减少代码体积,通常选择压缩后的代码库,使得XHR断点跟踪相对不那么容易了。

     

     

    当我们点击测试点击的时候,会将一个DOM给删除。于是会在删除的代码中实现断点

     

     

     

    三.ajax请求调试

    1.XHR Breakpoints

    注:此小结从别人文章中摘要。

    这几年前端开发发生了翻天覆地的变化,从当初的名不见经传到如今的盛极一时,Ajax驱动Web富应用,移动WebApp单页应用风生水起。这一切都离不开XMLHttpRequest对象,而“XHR Breakpoints”正是专为异步而生的断点调试功能。

     

    我们可以通过“XHR Breakpoints”右侧的“+”号为异步断点添加断点条件,当异步请求触发时的URL满足此条件,JS逻辑则会自动产生断点。演示动画中并没有演示到断点位置,这是因为,演示使用的是jQuery封装好的ajax方法,代码已经过压缩,看不到什么效果,而事实上XHR断点的产生位置是”xhr.send()”语句。

     

    XHR断点的强大之处是可以自定义断点规则,这就意味着我们可以针对某一批、某一个,乃至所有异步请求进行断点设置,非常强大。但是,似乎这个功能在日常开发中用得并不多,至少我用得不多。想想原因大概有两点:其一,这类型的断点调试需求在日常业务中本身涉及不多;其二,现阶段的前端开发大多基于JS框架进行,最基本的jQuery也已经对Ajax进行了良好封装,极少有人自己封装Ajax方法,而项目为了减少代码体积,通常选择压缩后的代码库,使得XHR断点跟踪相对不那么容易了。

    四.性能调试工具performance

    使用Chrome DevTools的performance面板可以记录和分析页面在运行时的所有活动。

     

     

     

    在火焰图上看到的圈起来的三条虚线,分别是:

    蓝线代表 DOMContentLoaded 事件。 绿线代表首次绘制的时间。

     

     

     

     

    展开全文
  • 这篇文章主要介绍了WordPres对前端页面调试时的两个PHP函数使用小技巧,分别是过滤Html内嵌JavaScript与禁止浏览器缓存的方法,需要的朋友可以参考下函数esc_js()(过滤 Html 内嵌 JS)参数$text(字符串)(必须)要过滤的...

    这篇文章主要介绍了WordPres对前端页面调试时的两个PHP函数使用小技巧,分别是过滤Html内嵌JavaScript与禁止浏览器缓存的方法,需要的朋友可以参考下

    函数esc_js()(过滤 Html 内嵌 JS)参数

    $text

    (字符串)(必须)要过滤的字符串。

    默认值:None

    返回值

    (字符串)返回过滤后的字符串。

    例子

    更多

    此函数位于:wp-includes/formatting.php

    nocache_headers()(禁止浏览器缓存)nocache_headers() 用来发送一个 header 头信息,告诉浏览器禁止缓存当前页面,一般在 Ajax 请求时使用,防止出现错误。

    用法

    nocache_headers();

    属性

    此函数没有属性。

    返回值

    此函数无返回值。

    例子

    function Bing_add_ajax(){

    nocache_headers();

    echo true;

    die;

    }

    add_action( 'template_redirect', 'Bing_add_ajax' );

    其它

    此函数位于:wp-includes/functions.php

    展开全文
  • 运行java 添加测试数据

    运行java

    在这里插入图片描述
    添加测试数据
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 若依RuoYi框架浅析 部署篇⑤——前端本地调试与云端部署。Visual Studio Code本地调试与CentOS云端部署。
  • 我们如果后端并不能关闭服务器,同时还要求前端页面实时更新,那么我们就需要更改设置 二、使用步骤 1)修改application.properties文件 重点是:spring.thymeleaf.cache=false 默认是为true,个人记忆:(保持缓存的...
  • 前端控制台调试

    2021-07-21 15:57:42
    localStorage.setItem(‘debug’,‘xxx:*’)
  • 1. 电脑上本地启动前端项目 若只是一个html文件,则需启动一个http服务运行该文件,在浏览器中会显示类似 http://127.0.0.1:5500/demo.html 的网址,具体操作方式如下: webstrom 直接运行html文件即可,运行的方式...
  • 在Javaweb的开发中后端的调试我们在后端代码打断点,debug运行即可,但是前端调试又应该如何进行呢? 前端代码调试在入门的时候我使用过如下的几种方法: 1、在代码中写入alter 2、在代码中写入console.log,在...
  • 前端调试初探

    2021-06-18 01:00:40
    任何网页开发者出于对自己网页的保护,都不想自己的前端代码被他人窃取或者抄袭。虽然我们平时都在忙着往代码里面写BUG,但是依然阻止他人对你代码的觊觎。由此,前端调试需求应运而生。在平时的项...
  • 前端页面出错调试方法 这个输出调试 console.log(response.data.data)
  • 由于之前做开发接触的项目,都是后端,也就是处理业务相关的工作,前端页面涉及的不多,所以在最近新接手的一个项目中,需要涉及到前端页面的开发工作,这期间遇到了一些小问题,在这里稍作记录。 这其中遇到的一个...
  • 前端调试是用来测试前端开发代码BUG比较常用的方式,通过调试我们可以把一些BUG提前扼杀在摇篮里。今天小千就来教大家利用Chrome谷歌浏览器进行前端调试,web前端初学者一定要好好看一下啦。
  • 展开全部下面62616964757a686964616fe78988e69d8331333361323565开始配置web项目调试选项:1.在主web项目上点击右键,选择Debug As->Debug Configurations->在Java Application上右键->New, 然后开始配置...
  • 好的工具往往能事半功倍,本文将重点给大家介绍前端开发调试利器 debugbar 的使用。相对 debugbar 来说,大家肯定都用过 Firebug 插件。但是 Firebug 在 ie 下不能使用。而 debugbar 却可以支持 IE。如果你用过 ...
  • 前端常见调试技巧

    2021-02-01 10:34:28
    任何一个编程者都少不了要去调试代码。一般来说调试程序实在编码之后或测试期修改Bug时进行的。 写了一堆代码一运行控制台一片红,昨天还好好运行,今天就崩了,遇到问题之后没能调整好心态,不能一有问题就找人...
  • 原标题:Visual Studio Code前端调试在 Build 2015 大会上,微软宣布推出免费跨平台的 Visual Studio Code 编辑器!Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有...
  • 前端调试技巧

    2021-09-10 14:50:33
    箭头: 用于在页面选择一个元素来审查和查看它的相关信息。 Elements 内容: 样式 计算属性 事件监听 将Ancestors和Framework Listeners两个checkbox取消选中可以看到 选择dom绑定的事件。 DOM breakpoints 在...
  • 前端布局方案灵活,方式并不唯一,仅供参考。 八种布局1. 弹性布局(flex)布局概念优点缺点2. 流式布局(Liquid Layout)布局概念优点缺点3. 响应式布局(Responsive layout)布局概念优点缺点4. 静态布局(Static ...
  • 前端webview调试总结

    2021-03-10 23:02:43
    安卓 安装chrome Google Chrome 网络浏览器 启动开发者选项 ...在「开发者选项中」打开...打开待调试webview页面,即可看到出现在设备列表中 点击其下方的inspect按钮,即可进入「控制台」调试 ios 下载安装Safari Tech
  • 为啥我的json串直接显示在了前端页面上啊而且断点调试没有给data赋值就输出了,data里面还有值。jsp代码function dologin() {var floginacct = $("#floginacct");var fuserpswd = $("#fuserpswd");var ftype = $("#...
  • 前端页面无法打开

    2020-12-30 10:15:17
    现象:服务通过docker部署后,前端页面无法打开,通过docker logs 查看无任何报错日志,在服务器上通过curl localhost:port 查看可以正常连接显示 解决:经查,是因为开启了防火墙,且端口未暴露,也没有添加白名单...
  • 定义和用法 debugger 语句用于停止执行 JavaScript,并调用 (如果可用) 调试函数。 使用 debugger 语句类似于在代码中设置断点。 ...访问所调试页面会跳出debugger F12 查看控制台 你的变量都可
  • 二、Vue前端 接下来,我们来完成vueblog前端的部分功能。可能会使用的到技术如下: vue element-ui axios mavon-editor markdown-it github-markdown-css 1、环境搭建 1 下载node.js node.js官网 检查版本(是否...
  • 甚至还有嵌入在APP的页面,经过调试之后还要重新发包。当然还有更加奇怪的现象,由于手机浏览器和Web浏览器的差异,经常会发现在Web浏览器上好好的,一到手机上就不行的情况。因此首先我们需要一个能在手机端调试的...
  • 问题复现一次扒某网站的前端代码,打开控制台要看Network,结果发现他们页面一打开控制台就不断的debugger,100ms一次,很影响看页面内容。就像下面这样的 问题分析每次在断点处停下来的时候页面都会跳到source这个...
  • nginx实现本地调试微信公众号线上配置域名前言步骤一、 nginx安装二、 修改本地host文件三、 配置nginx四、 修改vue项目配置五、 修改微信公众号授权打开的链接地址路径六、 重启项目 前言 场景:先描述一下我整个...
  • 安装:npm i vconsole npm i vconsole 然后在main.js文件添加代码: import Vconsole from 'vconsole'; const VConsole = new ...然后运行页面就可以看到调试的小窗口了 打开之后是这样的 成功! ...
  • 所以,小编我打算做一系列的文章来稍作讲解一下前端调试神器Chrome调试工具(大神请绕路)。控制台如下图:一.先来认识一下这些按钮的功能先来看这张图最上头的一行是一个功能菜单,每一个菜单都有它相应的功能和使用...
  • 上个学期四五月份开始零基础学习前端,当时对于谷歌浏览器的控制台没什么概念,有幸暑假在公司实习两个月,分享一下我使用谷歌浏览器的调试心得。调试工具:一、箭头按钮和设备图标箭头按钮:用于在页面选择一个元素...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 80,908
精华内容 32,363
关键字:

前端页面怎么调试