如何使用浏览器的F12查看下拉选择框

最新推荐文章于 2024-09-04 15:48:29 发布

是摩卡不是抹茶呀

最新推荐文章于 2024-09-04 15:48:29 发布

阅读量1w

点赞数 6

分类专栏： Vue 前端之旅文章标签：浏览器Debugger 前端开发下拉选择框 Vue

本文链接：https://blog.csdn.net/Mr_Mocha/article/details/103836781

版权

前端之旅同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

Vue

17 篇文章 0 订阅

订阅专栏

如何使用浏览器的F12查看下拉选择框

背景说明

当我们进行前端开发时，经常需要借助浏览器的F12功能来帮助我们debugger、查看元素样式等等。有些时候当我们想要查看下拉选择框时，却无法直接通过选取元素来查看这里面就是有什么。这给我们在开发过程中带来极大不便

解决方案

先打开F12，将鼠标移动到下拉选择框，然后长按ctrl+shift+c，也就是select an element in the page to inspect it

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

是摩卡不是抹茶呀

关注关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Chrome在线查看网页下拉列表的选项个数

suiluochenghu的博客

10-10

2265

（一）按F12或者“Ctrl+Shift+I”打开开发者工具（二）找到下拉列表的id 1、找到“Elements”； 2、点击①所代表的选择元素，再定位到下拉列表，并记住select标签（代表的是下拉列表）里的id，本例中为“sel_area"；（三）在console中查看结果在“Console”中添加如下代码，其中“sel_area”为第（二）步中获得的下拉列表id， alert(document.getElementById("sel_area").length); 按回车

下拉框操作

weixin_39080072的博客

04-05

1044

文章目录【1】介绍【2】思路【3】三种方式【4】示例代码【1】介绍观察下拉框页面元素。是select/option还是ul/li 1、菜单栏-点击其中的某个链接跳转 2、在下拉列表中选择一个值【2】思路 1、等待下拉列表和下拉列表中值存在 2、对下拉列表中的元素进行操作【3】三种方式 1、获取所有的下拉列表值，然后用循环去匹配相同的值 2、通过text的内容来找到下拉列表的某个值 3、如果...

2 条评论您还未登录，请先登录后发表或查看评论

F12如何定位弹窗里的元素

weixin_51900414的博客

09-06

1521

把鼠标放在Tab栏上某个菜单后，下拉框中会出现更多菜单，鼠标一旦移开了Tab栏上的菜单后，下拉菜单也会跟着消失，而且在F12的elements中找不到下拉菜单中的元素位置，难以抓取到元素的位置。4000是指4000ms，即4s，即按下回车后的4s后会进行元素抓取。比如说刚刚的下拉框，按下回车后，我们可以去打开下拉框，这时候下拉框的页面就会锁定，鼠标就算离开了Tab的菜单也不会关闭下拉框。因为这时候下拉框的页面已经被锁定了，我们可以按照抓取普通元素的方法对下拉框中的元素进行定位。2、定位下拉框中的元素。

浏览器F12定位悬浮下拉框元素

Mr_Thx的博客

08-12

5658

浏览器F12定位悬浮下拉框元素

UI自动化元素定位之下拉列表框

最新发布

2301_81967703的博客

09-04

1197

其实也是仿写了上面selenium的select_by_index 思路循环遍历，只是先要通过click方法触发一下options的展示。其中select_by_index是selenium自有方法源码，可直接调用，如下是源码信息。被测应用如图，禅道的添加用户页面，有一个部门的选项，是下拉列表框，这种类型的如何定位呢？过程中，可以多去看源码，看看官方的解决思路是怎么样的，多看多实践，有些也可以为我所用。其思路也是获取下拉的选项框，循环遍历寻找匹配的index，找到便设置成选中属性。也可以封装成一个方法。

使用浏览器的F12调整下拉选择框样式

qq_44268077的博客

02-10

2505

使用浏览器的F12调整下拉选择框样式

输入框三种输入方式（selenium webdriver 干货）

weixin_30888413的博客

09-30

3084

在机票预定的页面，输入出发城市和到达城市输入框的时候，发现直接使用sendkeys不好使，大部分情况出现输入某城市后没有输入进去，经过几天的研究，发现可以采取三种方式： 1. 先点击输入框，待弹出城市选择框之后，点击相应的城市 2. 缓慢输入城市的缩略字母或者城市的名字的部分，会显示出待选城市的下拉列表，进而从下拉列表中选择相应的城市. 3. 直接执行 js脚本对input的v...

python爬虫selenium操作下拉框详解

侯小啾技术博客

01-24

1万+

使用python爬虫的selenium操作网页的下拉框。以该网站为例：https://www.17sucai.com/pins/demo-show?id=5926 该网页下存在多个可供测试的下拉框。基本脚手架代码： from selenium.webdriver.support.ui import Select from selenium import webdriver import time driver = webdriver.Chrome() driver.get('https://www

js 点击选择前和选择后的数据对比_前端服务开发体验 – 学习使用组件管理页面数据...

weixin_39588252的博客

12-01

468

软件环境安装Node.js：Node.js是一个高性能的JavaScript运行环境，基于强大的Chrome V8引擎打造。安装地址：Node.jsnodejs.orgyarn：yarn是流行的包管理工具，yarn会缓存它下载的每个包，所以无需重复下载。它还能并行化操作以最大化资源利用率，安装速度之快前所未有。安装地址：Yar...

Jquery JS下拉框点击触发事件 .change / .on('change') 以及选定的option值和文本内容提取

热门推荐

weixin_41147129的博客

03-14

2万+

第一步：创建一个select下拉框 <select id="cputurbocheck"> <option value="LongTerm">Long Term</option> <option value="ShortTerm">Short Term</option> </select> 首先要明确，想添加一个...

f12弹出debug_调试Javascript代码(浏览器F12及VS中debugger关键字)

weixin_39583655的博客

12-20

1862

目前，常用的浏览器IE、Chrome、Firefox都有相应的脚本调试功能。作为我们.NET 阵营，学会如何在IE中调试JS就足够了，在掌握了IE中的调试方法以后，Chrome和Firefox中的调试方法也变得相当简单了。JavaScript debugger 语句开启 debugger ，代码在执行到第三行前终止。var x = 15 * 5;debugger;document.getEleme...

Dreamweaver怎么添加本地的浏览器为测试浏览器?

09-24

从下拉菜单中选择“编辑浏览器列表”，这将打开浏览器配置窗口。在这个窗口中，Dreamweaver 会自动检测并列出所有已安装在你计算机上的浏览器。你可以看到每个浏览器旁边都有一个复选框，用于设定默认和次要的测试...

html下拉菜单框框小三角找不到怎么办

GUOSJIA的博客

01-16

4941

在制作一些填写信息的表格的时候，会遇到多样的信息填写形式，单选，多选，框内填写等。有一种有下拉菜单的选择项，用和组合编写在制作过程你可能会遇到这样的问题：这里的框没有达到理想效果：这是没有达到理想效果的代码如何改进呢？删掉 size="2"就有小三角和输入框想要更加完美的视觉效果有“请选择…”省“请选择”区“ 只需要多加一个选项请选择…在已

怎么改变element UI 分页器的下拉选择样式

04-29

2. 打开浏览器的开发者工具（Chrome 可以按 F12 打开），找到分页器下拉选择框对应的 HTML 元素，并查看它的 CSS 类名。 3. 根据该 CSS 类名修改 CSS 样式。 ```css .el-pagination__sizes select { border: 1px ...

robotframework使用之 下拉框的选择

爱敏的博客

03-16

1万+

选择下拉框有几种方式处理，首先在浏览器F12选择下拉框1. F12后看见下拉框的源码是<option xxx><select class="w_60" data-reactid=".0.$/=10.2.$/=10.0.1.1.0.0.1.1"> <option selected="" value="" data-reactid=".0.$/=10.2.$/=10.0.1.1.0.0.1.1.0">请

枚举基础（界面下拉单）

星空之旅1995

01-08

451

对于枚举，初学Java的时候可能我们就已经接触过了，但是在毕业前，其实一直都不知道真正工作里面枚举是怎么用的，枚举有什么用？接下来，博主就介绍枚举在实际工作中的一种使用场景，本文只适合初级的小菜鸟看哈，大神看了可别嘲笑这是水文哦，哈哈！一、使用场景在实际的工作中，比如我有一个选择家庭关系的下拉选择框，大家都是会是value和desc的组合，一般我们保存到数据库的都是value（英文

Vue项目 Unresolved variable or type module

IceStreamLab

11-22

1万+

Element-UI upload上传文件失败正确解析错误内容

IceStreamLab

01-13

8661

<el-upload class="upload" :action="uploadExcelAction" :headers="headers" list-type="picture" :show-file-list="false" :before-upload="beforeUpload" :on-success="uploadSuccess" :on-error="u...