WEB前端代码如何调式？

最新推荐文章于 2024-06-21 15:52:46 发布
最新推荐文章于 2024-06-21 15:52:46 发布
阅读量468 收藏
点赞数 2
分类专栏： WEB前端系列 文章标签： WEB前端系列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40569627/article/details/94410947
版权

1、打断点在js中写个debugger；就好了
2、然后打开开发人员调试工具F12，正常走程序，就会走到你打的断点位置，如图所示就可以看到返回的值了
在这里插入图片描述
3、如何想要更直观的看还可以把参数放到控制台上，按一下回车键就会打印了，如下图所示
在这里插入图片描述
4、控制台是可以直接写js代码的，比如你直接用jquery选择器取一个输入框的value值
在这里插入图片描述

梦该醒醒了
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
web前端开发音乐播放器网页代码
03-21
在本项目中，"web前端开发音乐播放器网页代码"，我们主要会探讨以下几个关键知识点： 1. **HTML结构**： 音乐播放器的HTML结构通常包括播放/暂停按钮、进度条、音量控制、歌曲列表、封面图片和播放时间等元素。...
前端调试入门
萌萌哒的瑞萌萌的博客
09-29 1960
调试其实是非常重要的开发的通用型的能力，而这往往被大多数开发人员忽略。代码在某个平台运行，把运行时的状态通过某种方式暴露出来，传递给开发工具做 UI 的展示和交互，辅助开发者排查问题、梳理流程、了解代码运行状态等。某个平台，可以是浏览器、Node.js、Electron、小程序等任何能执行 JS 代码的平台暴露出的运行时状态，可能是调用栈、执行上下文，或者 DOM 的结构，组件的状态等暴露出这些数据的方式一般是通过基于 WebSocket 的调试协议。
前端开发调试技巧
逆袭的菜鸟X
12-01 3033
如图所示，我们只需要在你想再次发送的网络请求上右键，然后选择“Replay XHR”即可，Chrome就会自动为我们再次发送该请求，无需做其他的任务操作。首先同样的在你需要重复发送的请求上右键，然后选择Copy—Copy as fetch，接下来我们只需要打开控制台，然后使用我们最熟悉的Ctrl + V。正对js代码的调试，我们往往需要获取某些变量的值，于是在早期我们往往通过alert方法将变量的值通过弹窗的形式进行打印。Chrome同样也想到了这一点，并且还可以让我们自由的去设计请求参数。
开发调试秘籍--前端Debugger实战
最新发布
每天都要努力学习哦~~
06-21 625
调试工具的面板有很多，先掌握做常用的4个元素(Element)控制台（Console）源代码（Sources）网络（Network）掌握Chrome调试工具的基本使用认识常见报错的种类能够在报错中提取关键信息能够通过调试工具、二分注释排除法，准确定位代码Bug位置。
前端调试技巧汇总
pandaClose的博客
03-21 3313
其实说到调试技巧，我相信现在会有很多种类的调试技巧，每个人都有自己的调试方式方法； 现在我把我自己的调试技巧总结一下，也许会对其他的小伙伴有帮助； 1.日志调试 这种调试方案是最方便简明的，直接在需要调试的代码处console.log（xxx），可以直接打印出所需要的数据，一目了然； 添加console.log(),之后可以直接在控制台看到所需要打印的数据，可...
分享几个前端开发调试的技巧
qq_57557454的博客
04-08 465
Mac 可以通过 command + P 快捷键，打开搜索文件的窗口，直接输入文件名打开对应的文件，然后再定位到想要调试的代码。将 launch.json 文件中的 url 替换成项目的 url ，给需要调试的代码打上断点，点击启动图标即可进行调试。比如说想调试 layout 文件夹下 siderMenu.tsx 里的代码。在想要调试的代码处，随便输出点内容，点击蓝色字体也可以跳转至源文件处。不过代码一般都是经过打包后的，直接找的话比较难找到。最简单粗暴的方法就是在控制台打印输出查看结果。
前端开发调试
会思想的苇草i的博客
01-17 1854
前端开发调试是在开发过程中解决和修复代码问题的关键步骤。本文将介绍一些常见的前端调试技巧和工具，包括浏览器开发者工具的使用、调试工具的配置和断点调试等。我们还会讨论常见的前端错误类型和调试方法，如JavaScript错误、CSS问题和网络请求调试等。通过学习本文，读者将能够提高前端调试的效率，快速定位和解决代码问题，提升开发质量和用户体验。
产品名称模拟测试web前端代码
03-28
在“产品名称模拟测试web前端代码”中，我们主要探讨的是与Web前端开发相关的测试技术和实践。Web前端是用户与应用程序交互的界面，因此它的性能、功能和用户体验至关重要。在这个项目中，我们可能会涉及到以下几个...
基于物联网的智慧农业监测系统web端前端代码
06-07
【标题】"基于物联网的智慧农业监测系统web端前端代码" 涉及的主要知识点是物联网技术在智慧农业中的应用，以及前端开发的相关框架和配置。这个系统旨在通过物联网技术收集农业环境数据，如温度、湿度、光照等，然后...
web前端学习笔记以及代码
02-24
本压缩包“web前端学习笔记以及代码”显然包含了一套完整的前端学习资源，包括理论知识和实践代码，这对于初学者或者希望提升技能的开发者来说非常有价值。 首先，前端开发通常涵盖以下关键知识点： 1. HTML...
前端web站代码wknew.rar
02-24
本资源“前端web站代码wknew.rar”是一个完整的前端Web站点项目，基于流行的Bootstrap框架构建，特别适合初学者进行学习和实践。Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，它包含了丰富的HTML、CSS...
前端调试方法与技巧
m0_45127388的博客
11-12 5051
一、pc端项目（浏览器端的，主要指电脑端的网页） 调试方法 1、控制台或代码中善用console，它会清晰的打印出我们在执行中数据的值，方便查看。不要使用alert，因为alert是阻断线程运营的操作，当不点击当前alert的确定，下一个alert是不会出现且对数据较多时不友好。 2、 控制台中各功能按钮介绍 1、Element 源码定位 打开测试工具，点击箭头，在页面中选择要审查的元素，此时会定位在代码块，会有html及css布局的展示，可进行动态更改排查问题 若html中有调用事件，如何定位事件：el
WEB前端代码调试总结
jhts95559的博客
12-29 1989
任何一个编程者都少不了要去调试代码，不管你是高手还是菜鸟，调试程序都是一项必不可少的工作。一般来说调试程序是在编写代码之后或测试期修改Bug 时进行的，往往在调试代码期间更加能够体现出编程者的水平高低以及分析问题的准确度。不少初学者在寻找错误原因时，总是不得要领，花费了大量时间却无法解决一些最终证明是相当简单的Bug。 　　在长期解答 zTree 相关问题时，也的确发现很多的问题其实不算什么问题
一探前端开发中的JS调试技巧
叶叶茵的博客
04-07 3958
js调试技巧
代码调试系列之前端代码调试的几种基本方法
YaoDeBiAn的博客
02-03 5102
github文章地址：https://github.com/yaodebian/blog/issues/2 知乎文章地址：https://zhuanlan.zhihu.com/p/56231646 针对前端代码的调试，我们更多的是对javascript代码的调试，我们常用的可能就是向alert、console等方式，同样的对于DOM元素变化的js脚本也可以进行监听调试，然后就是简单的HTML元...
前端技术-调试工具（上）
weixin_30649641的博客
05-16 1714
页面制作之调试工具 常用的调试工具有Chrome浏览器的调试工具，火狐浏览器的Firebug插件调试工具，IE的开发人员工具等。它们的功能与使用方法大致相似。Chrome浏览器简洁快速，功能强大这里主要介绍Chrome浏览器的调试工具。 打开 Google Chrome 浏览器，通过下面任何一种方式进入开发人员工具： -点击位于浏览器用户界面右上角的“页面”下拉菜单，“更多工具”→“开发人员工具...
web 前端调式工具
专注Java（全栈）应用开发，求知若渴，虚心若愚，talk is cheap, show me the code.
01-19 257
1.chome 的调试，比较常用 2.firebugs 的调试（已经不再维护） 1.高版本的火狐好像firebugs 不兼容，为此将到了低版本上 软件下载地址为： https://download.csdn.net/download/lovedengxu/10322048 整合后的软件下载地址： forefox 49+ 链接：https://...
前端调试
weixin_34019929的博客
01-22 700
github项目地址 一.为什么需要调试 解决bug通常要对代码进行调试，这样才能比较容易的找出关键性问题。掌握一个好的调试技巧是一个开发人员必备的基本技能。 二.基本调试（pc端） 这里我们拿一套iview-admin 的源码来进行调试 1.肉眼调试 所谓肉眼调试就是指直接看代码进行调试，这种方式效率非常低下。 2.console log(...) 查看console.log(...)打印出...
web项目调试
热门推荐
一筐猪的博客
08-15 1万+
  web项目调试 web项目往往由前端和后台组成，涉及的内容和知识特别多，初学者由于对其运行机制理解不到位，同时没有掌握恰当的调试方法，当项目出现问题时就比较茫然、无从下手。提高调试能力对于程序员来讲是至关重要，是成为一个合格程序员的必经之路。 一、总体思路 （1）理解清楚web项目运行基本机制，理清程序运行轨迹； （2）掌握Java代码调试方法和技巧； （3）掌握浏览器前端调试方法...
Web前端开发实践指南
"Web前端开发最佳实践" 本书《Web前端开发最佳实践》由党建撰写，属于Web开发技术丛书中的一部，旨在为Web前端开发者提供正确的学习和编码指导，避免因错误或过时的实践方法导致的不良开发习惯。该书由中国机械工业...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值