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

最新推荐文章于 2024-07-23 20:11:17 发布

是摩卡不是抹茶呀

最新推荐文章于 2024-07-23 20:11:17 发布

阅读量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

分享到新浪微博

扫一扫

专栏目录

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

09-24

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

F12如何定位弹窗里的元素

weixin_51900414的博客

09-06

1386

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

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

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

Mr_Thx的博客

08-12

5487

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

Web开发：浏览器F12开发者工具使用小结

最新发布

m0_67412019的博客

07-23

2498

【小技巧】CTRL+F5查找元素右键-编辑为HTML【WS】Websocekt过滤。

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

suiluochenghu的博客

10-10

2211

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

selenium定位非select的下拉选择框

qyykaola的博客

03-29

1523

下拉框中的内容无法用F12查看xpath 里面的值是根据value来定的找了很多的文章，终于能定位到 1.打开F12 2.长按住CTRL+shift+C，然后点击下拉框 终于可以出来了用xpath定位 driver.find_element_by_xpath('//li[@title="店长"]').click() 成功了。不容易啊。。。。。。。。 ...

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

qq_44268077的博客

02-10

2413

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

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

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

weixin_30888413的博客

09-30

3062

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

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

weixin_39588252的博客

12-01

458

软件环境安装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> 首先要明确，想添加一个...

枚举基础（界面下拉单）

星空之旅1995

01-08

428

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

chrome浏览器vue-devtools插件v6.4.1

12-12

现在，当你在浏览运行Vue.js的应用时，打开开发者工具（快捷键F12或右键单击页面空白处，选择“检查”），你就能在工具栏中看到Vue DevTools的图标，点击即可使用。 Vue DevTools的主要功能包括： - **组件树**：...

Firebug入门指南(Firefox浏览器)

09-05

通过JavaScript文件下拉列表选择要查看的文件。 - **DOM**：展示页面对象和window对象的属性，包括所有变量及其值。 - **Net**：监控所有下载，包括时间、HTTP请求头和服务器响应头，对AJAX调试非常有用。 **四、...

360安全浏览器6.0快捷键设置.docx

09-26

2. **弹出地址栏下拉列表**：按下`F4`，会显示地址栏的历史记录和建议，便于快速选择之前访问过的网址。 3. **显示/隐藏侧边栏**：使用`Ctrl + Shift + S`可以快速切换侧边栏的显示状态，侧边栏通常包含书签、下载...

FireBug使用指南.doc

06-04

顶部下拉列表选择文件进行调试。 5. DOM标签：展示页面对象和window对象的属性，包括所有变量及其值。 6. Net标签：监控页面所有下载，显示时间、HTTP请求头和响应头信息，适用于AJAX调试。四、随时编辑页面在...

python中选取下拉框中某个值_Java-Selenium，获取下拉框中的每个选项的值，并随机选择某个选项...

weixin_39603778的博客

12-17

1948

今天逛51testing，看见有人问这个问题。现在以Select标签为例。1、首先看页面中的下拉框，如图：2、F12查看页面源代码，如下--无--普通会员VIP3、java代码调试下，获取下拉框中的每个选项的值//1、根据元素定位找到select这个标签Select level = new Select(driver.findElement(By.id("grade_id")));//2、getO...

下拉框操作

weixin_39080072的博客

04-05

1031

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

jQuery怎么获取被选择的select下拉框的值，并理解f12的非实时性

Ideality_hunter的专栏

06-13

834

jQuery怎么获取被选择的select下拉框的值？由此也对f12，有了更深的理解，f12不是实时的，用户的实时操作是不会显示在f12代码中的。

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

04-29

可以通过修改 Element UI 的样式来改变分页器下拉选择框的样式。具体步骤如下： 1. 在你的项目中引入 Element UI 的样式文件。 ```html <link rel="stylesheet" href="path/to/element-ui/theme/index.css"> ``` 2. 打开浏览器的开发者工具（Chrome 可以按 F12 打开），找到分页器下拉选择框对应的 HTML 元素，并查看它的 CSS 类名。 3. 根据该 CSS 类名修改 CSS 样式。 ```css .el-pagination__sizes select { border: 1px solid red; /* 修改边框样式 */ background-color: yellow; /* 修改背景色 */ color: blue; /* 修改文字颜色 */ /* ... */ } ``` 4. 将修改后的 CSS 样式应用到你的项目中。 ```html <style> /* 将修改后的 CSS 样式写在这里 */ </style> ``` 注意：在修改 Element UI 样式时，需要注意不要修改 Element UI 的原有样式，否则可能会影响到其他组件的样式。建议在修改样式时使用 CSS 选择器限定范围，只修改当前组件的样式。