前端开发提高效率的两大工具

一、浏览器中的开发者工具

怎么启动开发者工具?

在浏览器中按下F12或者鼠标右键点击检查

怎么利用(常用的几点)?

1、元素

点击标红的图标可以用于在页面选择元素,同时右侧会找到元素在前端代码中的位置

点击下方红框可以看见页面在移动端中的页面展示 

双击要修改的地方,可以进行编辑 ;修改后回车即可修改成功,可以看到左侧页面也出现相应变化

 

 单击最右侧要修改的样式,即可在页面观察到样式变化

总结:通过浏览器开发者工具中的元素可以快速找到页面中对应元素在代码中的位置,修改页面内容以及对元素的样式进行增加修改等等,修改后都可以即时看到修改后的效果。

注意:这里的修改只局限于当前页面,是为了方便我们看修改后的效果,页面的代码并没有改变,如果想要修改后的效果还要去页面代码中进行相应的修改。

2、控制台

当页面不显示时控制台可以帮助我们查看一些错误的原因

3、网络 

点击页面登录按钮后会触发网络请求,在网络的表头栏可以看见对应触发的网络请求路径,请求方式,响应头和请求头等信息。

在负载栏我们可以看到请求体,里面有前端要传给后端的数据 

 在响应栏可以看到响应体,里面有后端接受到前端传回的数据后做出的响应(即后端返回给前端的数据)

总结:通过网络可以知道点击按钮等操作后触发的网络请求的路径,方式,请求体和响应体等内容(即可以查看前端传给后端的数据以及后端传回前端的数据) 

二、Vscode工具

1、不知道在哪个文件

点击红框搜索可以知道某个字段或者组件所在哪个文件中

2、不知道在文件的哪个位置

在文件页面点击Ctrl+F在出现的搜索栏中找字段可以知道该字段在文件中出现的地方以及次数

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/645349.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

(delphi11最新学习资料) Object Pascal 学习笔记---第3章第3节(Case语句)

Object Pascal 学习笔记,Delphi 11 编程语言的完整介绍 作者: Marco Cantu 笔记:豆豆爸 3.3 Case 语句 ​ 如果您的 if 语句变得非常复杂,并且它们基于对序数值的测试,您可以考虑将它们替换为 case 语句。case 语句包括一个用于…

Hudi学习笔记(一)

大数据发展背景 Hudi用于管理分布式文件系统上大型分析数据集存储,支持Spark和Flink整合。它能够是DFS数据集在分钟级时延内支持变更,也支持下游系统对这个数据集的增量处理。 学习目标 什么是数据湖为什么使用数据湖Hudi基本功能如何编译Hudi源码Hud…

MySQL(七)MySQL和Oracle、PostgreSQL的区别

文章目录 一、MySQL和Oracle1.1 基本差别1.2 使用区别 二、MySQL和PostgreSQL2.1 基本差别2.2 使用差别 本系列文章: MySQL(一)SQL语法、数据类型、常用函数、事务 MySQL(二)MySQL SQL练习题 MySQL(三&…

vue 解决:Module not found: Error: Can‘t resolve ‘vue-router‘ 的问题

1、问题描述: 其一、报错为: Module not found: Error: Cant resolve vue-router 中文为: 找不到模块:错误:无法解析“vue-router” 其二、问题描述为: 根据报错的中文信息可知:应该是无法…

【linux】远程桌面连接到Debian

远程桌面连接到Debian系统,可以使用以下几种工具: 1. VNC (Virtual Network Computing) VNC(Virtual Network Computing)是一种流行的远程桌面解决方案,它使用RFB(Remote Framebuffer Protocol&#xff0…

spring中循环依赖问题、Servlet 的过滤器与 Spring 拦截器区别

spring中的循环依赖问题 当A类中关联B,B类中关联A class A {B b; } class B {A a; } 正常java代码中new A时,b为null;new B时,a为null; 但是在spring中,由于对象是由spring容器管理的,当创建…

【开源】基于JAVA语言的新能源电池回收系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户档案模块2.2 电池品类模块2.3 回收机构模块2.4 电池订单模块2.5 客服咨询模块 三、系统设计3.1 用例设计3.2 业务流程设计3.3 E-R 图设计 四、系统展示五、核心代码5.1 增改电池类型5.2 查询电池品类5.3 查询电池回…

美易官方:波音供应大户Spirit AeroSystems股价上涨,错误安装爆裂飞机舱门事件引发关注

波音供应大户Spirit AeroSystems(SPR)的股价在美股盘前上涨了5%。据西雅图时报报道,波音公司的机械师错误地将爆裂的飞机舱门安装到其他飞机上,这可能意味着波音公司将承担飞机舱门爆裂事故的主要责任。 这一消息引发了市场对波音…

简单对象池ObjectPool

注释 在项目上经常会遇到生成很多同样的物体&#xff0c;往往会对性能造成很大的影响&#xff0c;所以可以采用以下的对象池系统来进行简单的操作 对象池系统 这个模块的主代码&#xff0c;主要用于生成对象&#xff0c;销毁对象 public class ObjectPool : Singleton<Ob…

35、WEB攻防——通用漏洞XSS跨站反射存储DOM盲打劫持

文章目录 XSS产生于前端的漏洞&#xff0c;常产生于&#xff1a; XSS分类&#xff1a; 反射型&#xff08;非持久型&#xff09; 存储型&#xff08;持久型&#xff09;&#xff0c;攻击代码被写入数据库中。常见于&#xff1a;写日志、留言、评论的地方 DOM型 DOM型XSS与…

Kubernetes-Taint (污点)和 Toleration(容忍)

目录 一、Taint&#xff08;污点&#xff09; 1.污点的组成 2.污点的设置、查看和去除 3.污点实验&#xff1a; 二、Toleration&#xff08;容忍&#xff09; 1.容忍设置的方案 2.容忍实验&#xff1a; Taint 和 toleration 相互配合&#xff0c;可以用来避免 pod 被分配…

Windows AD 组策略 通过脚本修改管理员密码:以安全方式

因为本文主要讲的是通过脚本如何以安全方式设置密码&#xff0c;所以关于组策略如何设置请参考这里&#xff1a; WinServer 2019 AD 组策略 启用本地管理员账号&#xff0c;重置密码_ad域命令启用administrator账户-CSDN博客 我们首先要讲一下&#xff0c;以一般方法创建的脚…

2017年认证杯SPSSPRO杯数学建模C题(第二阶段)移动端考研产品的春天真的到来了吗全过程文档及程序

2017年认证杯SPSSPRO杯数学建模 C题 移动端考研产品的春天真的到来了吗 原题再现&#xff1a; 2017 年的全国硕士研究生招生考试共有 201 万人报名参加&#xff0c;比去年增加了 24 万名考生&#xff0c;增加 13.56%。看起来新一轮的考研热潮即将到来&#xff0c;而考研教学和…

【技能---构建github中SSH密钥的流程】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言SSH基于账号口令的安全验证通过SSH连接到服务器打开终端&#xff08;命令行界面&#xff09;使用 SSH 命令连接&#xff1a; 在 Ubuntu 中生成 SSH 密钥并将其添…

用可视化案例讲Rust编程4. 用泛型和特性实现自适配shapefile的读取

本节已经涉及Rust学习曲线上的一个大坑&#xff1a;泛型和特性了&#xff0c;属于语言的深水区&#xff0c;如果初学者&#xff0c;建议看一眼知道有这个功能即可。 如果我们立足于功能实现&#xff0c;那么做到像上一节那样就可以了&#xff0c;从原理上来说&#xff0c;每个…

LeetCode刷题笔记之二叉树(一)

一、二叉树的基础知识 常见的二叉树类型&#xff1a; 满二叉树&#xff08;Full Binary Tree&#xff09;&#xff1a; 只有度为0和度为2的结点&#xff0c;且度为0的结点位于最后一层。完全二叉树&#xff08;Complete Binary Tree&#xff09;&#xff1a; 倒数第二层是满二…

unity36——原神等手游常用的物理bone(弹簧)裙摆,与Cloth(布料)裙摆插件 Magica Cloth 使用教程(一)

目前我们手游开发&#xff0c;经常会遇到头发&#xff0c;双马尾&#xff0c;长裙&#xff0c;飘带等。以前我们都是在三维软件中制作骨骼后&#xff0c;自己手动K针。这样做有一些弊端&#xff0c;时间长&#xff0c;并且K帧的飘带效果没法随着游戏中角色的移动&#xff0c;旋…

【学网攻】 第(8)节 -- 端口安全

文章目录 【学网攻】 第(1)节 -- 认识网络【学网攻】 第(2)节 -- 交换机认识及使用【学网攻】 第(3)节 -- 交换机配置聚合端口【学网攻】 第(4)节 -- 交换机划分Vlan【学网攻】 第(5)节 -- Cisco VTP的使用​​​​​​【学网攻】 第(6)节 -- 三层交换机实现VLAN间路由【学网攻…

【GCC】gpt问答

WebRTC(Web Real-Time Communication)中的RemoteEstimatorProxy是一个重要的组件,它用于在网络传输中处理带宽估计。RemoteEstimatorProxy主要是与谷歌拥塞控制(Google Congestion Control, GCC)算法或接收器估计的最大比特率(Receiver Estimated Maximum Bitrate, REMB)…

前端项目部署发版流程

一、本地代码以全部提交并推送至仓库 二、项目根目录添加&#xff08;Dockerfile、nginx.conf文件&#xff09; 三、npm run build打包生成dist文件&#xff08;项目根目录&#xff09; 四、启动docker(登录状态) 五、执行命令 docker buildx build -t ‘项目的容器集群地…