scala
动作识别
1024
链表
node.js
语音识别
图书馆座位预约
ioc
flink watermark
klee
supervisor
图像半自动标注
系统架构
无线控制器
CSDN
tryAcquire
个人博客
可视化
android大作业
插入排序
chrome devtools
2024/4/12 19:23:38
puppeteer|自动化UI测试|JS|零基础入门（二）——找到页面元素与输入、点击
puppeteer——找到页面元素、输入与点击从API学习page.$(selector)password_text.type（text）login_btn.click()话不多说，上干货 //从page中找到SELECTOR.PASSWORD_TEXT所指向的密码输入框const password_text await page.$(SELECTOR.PASSWOR…
puppeteer|自动化UI测试|JS|零基础入门（一）——打开浏览器
puppeteer——打开浏览器从API学习puppeteer.launch（[options])broswer.newPage()page.goto(url,[options])话不多说，上干货
//新建一个browser实例对象const browser await puppeteer.launch({//关闭无头模式headless: false,//全屏打开浏览器args: […
puppeteer|自动化UI测试|JS|零基础入门（四）——页面截图、元素截图
话不多说，看代码
//登陆页面截图，保存在ScreenShot文件夹，并命名为login_page.pngawait page.screenshot({path:login_page.png})
//登陆按钮截图，保存在ScreenShot文件夹，并命名为login_button.pngawait login_btn.…
全栈笔记_插件篇（谷歌扩展插件开发系列之 manifest.json配置文件）
manifest.json介绍 是必不可少的插件配置文件，放在根目录作用： 提供插件的基本信息，便于快速了解插件的特性和来源 name：插件的名称manifest_version：manifest.json文件的版本号，可以写2或3version：插件的版本description：插件描述定义插件的行为： browser_action：定…
JavaScript中var,let和const的联系与区别
全局作用域
使用var关键字声明的全局作用域变量属于window对象,可以再修改。
使用let关键字声明的全局作用域变量不属于window对象，可以再修改。
const关键字定义的常量，声明时必须进行初始化，且初始化后不可
再修改。使用 const 定义的…
Electron桌面应用实战：Element UI 导航栏橙色轮廓之谜与Bootstrap样式冲突解决方案
目录
引言
问题现象及排查过程
描述问题
深入探索
查明原因
解决方案与策略探讨
重写样式
禁用 Bootstrap 样式片段
深度定制 Element UI 组件
隔离样式作用域
结语 引言 在基于 Electron 开发桌面应用的过程中，我们可能时常遇到各种意想不到的问题…
深度解析浏览器工作原理与v8引擎
1.浏览器中js如和被执行的 当我们输入一个域名时会经历dns解析变成一个ip地址，然后浏览器会通过这个ip地址去访问服务器，服务器会放回一个index.html页面，浏览器开始解析这个inde.html文件，当解析到link标签时就开始下载对应的css…
ChromeDriver谷歌驱动最新版安装120/121/122
chromeDriver最新版本下载
最新驱动
https://googlechromelabs.github.io/chrome-for-testing/参考： https://blog.csdn.net/m0_57382185/article/details/134007615
Chrome 浏览器插件 cookies API 解析
Chrome.cookie
前端开发肯定少不了和 cookie 打交道，此文较详细的介绍下 chrome.cookie 的 API 以及在 popup、service worker、content 中如何获取的
一、权限（Permissions）
如果需使用 Cookie API，需要在 manifest.json 文件…
几个非常实用的 Chrome Devtools 技巧
原文链接：[几个非常实用的 Chrome Devtools 技巧](https://fe32.top/articles/skill001/ 关于 Chrome 浏览器，如果你是一名前端开发者，相信对此并不陌生，我们可以用它来查看 网络请求、分析网页性能、调试 JavaScript 功能 等。
…
google浏览器查看页面源代码js文件内容中文乱码解决办法
解决方案：使用Set Character Encoding插件
1.插件来源有2种途径
第一种：打开谷歌浏览器的扩展程序中心，直接在谷歌商店里搜索，不过对于国内来讲，谷歌商店连不上。
第二种：在网上自己搜这个插件ÿ…
浏览器事件循环原理 —— 任务优先级
系列文章目录
第一章 浏览器事件循环原理 —— 浏览器进程模型第二章 浏览器事件循环原理 —— 渲染主线程如何工作？第三章 浏览器事件循环原理 —— 何为异步？第四章 浏览器事件循环原理 —— JS为何会阻碍渲染？ 文章目录
系列文章目录
文…
(2)你真的会用Chrome devtool吗?
本文首发于我的个人博客: https://teobler.com Performance Performance API 有的时候我们可能会想测试一下用户的某一个操作要消耗多少时间，而通常一般人会这么做： const start new Date().getTime();// do your workconst end new Date().getTime()…
puppeteer|自动化UI测试|JS|零基础入门（三）——异步操作与promise、async、await
puppeteer——异步操作、promise、async、await 异步操作promiseasync与await内容硬核，个人理解！ 前面的代码中，开头都是以async、await开头，并且有看到promise类型的返回值，今天撸顺它，看看到底是怎么个事…
Chrome DevTools 与 WebSocket 数据查看失焦的问题
Chrome DevTools 在与 WebSocket 连接交互时可能会出现失焦的问题，这似乎是一个已知的 bug。当 DevTools 选中 WebSocket 消息时，如果有新的消息到达，DevTools 将会自动失焦，导致无法查看完整的消息内容。
虽然这个问题很令人困扰…
前端性能优化之性能优化的指标和工具（chrome devtools、lighthouse、webpagetest）
文章目录 引言一、为什么要进行web性能优化二、RAIL测量模型1. 什么是RAIL2. 性能测量工具 三、性能测量工具的使用和性能指标以及优化目标1. Chrome DevTools1. 打开调试工具方式和配置2. network下的几个性能指标1. requests 请求总数2. transferred实际从服务器下载的数据量…
Vue-devTools安装—创建项目方法2 ui创建——Vue指令综合案例——汽车品牌管理
目录
项目源代码：
一、vue-devTools安装 二、案例功能实现
1、新建项目（ui创建） 2、cnpm导入项目依赖库 3、删除不需要的代码结构: 4、修改代码结构
5、添加汽车品牌
插件安装
bootstrap的提示功能
添加bootstrap样式
6、删除汽车品牌…
Vue开发加速器：Chrome的vue-devtools插件解决开发难题
I. 简介
Vue.js是一个流行的前端JavaScript框架，它允许开发人员轻松构建可扩展的Web应用程序和移动应用程序。vue-devtools是一个Chrome浏览器的扩展程序，它是由Vue.js官方维护的一款强大的调试工具。结合Vue.js和vue-devtools插件，开发人员…
![[chrome devtools]Sources面板](https://img-blog.csdnimg.cn/490021fc393b491b88483935dbd74998.png)
[chrome devtools]Sources面板
Source面板左侧部分内容： 下面解释每一项：
Page：显示当前页面所有已加载的资源Filesystem：将本地代码拖进来，作为一个workspace，可以直接在这里面编辑代码，然后页面就可以直接看到效果…
一步步指导：在Chrome中安装Vue插件vue-devtools
一步步指导：在Chrome中安装Vue插件vue-devtools 1. 引言1.1. 关于Vue.js1.2. 为何使用vue-devtools 2. vue-devtools简介2.1. vue-devtools的功能2.2. 兼容性和需求 3. 如何在Chrome中安装vue-devtools3.1. 访问Chrome网上应用店3.2. 搜索并找到vue-devtools3.3. 安…
使用开发者工具等跳过付费墙
使用开发者工具等方法跳过付费墙 参考于： https://bbarrows.com/posts/how-to-get-around-paywalls-with-debug-tools
Everyone Hates Paywalls 每个人都讨厌付费墙
像csdx网站，不登录看不到之后的内容
下面是一些方法跳过付费墙 (1) 视图滚动 Chrome…
下拉列表select动态添加option和获取选中的option的值和value
分别用两种方法动态添加option：
方法一：JS方法添加
1、创建select标签
var select documnet.createElement(‘select’);
2、给select添加id
select.setAttribute(‘id’,‘selectid’);
3、给select添加onchange事件
select.setAttribute(‘onc…
puppeteer|自动化UI测试|JS|零基础入门（六）——等待waitFor
话不多说，上代码 //等待登陆按钮selector出现在页面中await page.waitForSelector(SELECTOR.LOGIN_BTN)//页面等待3秒await page.waitForTimeout(3000)//等待登录按钮XPath出现在页面中await page.waitForXPath(XPATH.LOGIN_BTN)await page.goto(url)//等待页面加载…
puppeteer|自动化UI测试|JS|零基础入门（五）——frame、iframe
话不多说，看代码 //用frames函数取出页面所有iframeconst frames await page.frames();//使用循环取出iframefor (var i of frames) { //使用url()函数得到里面的url标题进行对比if (i.url().includes(frame_url)){const frame i;} };await frame.waitForSelector…
在国内如何给Chrome浏览器安装Vue Devtools插件
Vue Devtools是一个强大的Chrome浏览器插件，为Vue.js开发者提供了丰富的调试和性能优化功能。然而，在国内由于无法访问Google Chrome Web Store，安装Vue Devtools需要使用其他方法。以下是安装步骤：
步骤一：下载Vue D…
【保姆级讲解如何Chrome安装Vue-devtools的操作】
🌈个人主页:程序员不想敲代码啊🌈 🏆CSDN优质创作者，CSDN实力新星，CSDN博客专家🏆 👍点赞⭐评论⭐收藏 🤝希望本文对您有所裨益，如有不足之处，欢迎在评论区提…
JS 缓存: Service Worker 实现离线应用
JS 缓存: Service Worker 实现离线应用 文章目录JS 缓存: Service Worker 实现离线应用Service Worker 概述1. 加载 Service Worker2. Service Worker 编程2.0 Service Worker 生命周期2.1 install 启用缓存2.2 fetch 缓存代理2.3 activate 清理资源小结其他资源参考连接完整代…
谷歌浏览器 | Chrome DevTools系统学习篇-概述
Chrome DevTools是一套直接内置到谷歌Chrome浏览器的web开发工具。DevTools可以帮助您即时编辑页面并快速诊断问题，最终帮助您更快地构建更好的网站。我们今天的概述主要讲述谷歌浏览器的日常使用和几大常见控制面板的介绍。 目录
1.打开谷歌浏览器
2.谷歌浏览器的…
11 个很酷的 Chrome Devtools 技巧
1.添加条件断点
通过下面的代码，我们希望食物的名字是🍫 当断点被触发时，我该怎么做呢？
const foods [{name: 🍔,price: 10},{name: 🍫,price: 15},{name: 🍵,price: 20},
]
foods.forEach((…
分享Web.dev.cn中国开发者可以正常访问
谷歌开发者很高兴地宣布，web.dev 和 Chrome for Developers 现在都可以通过 .cn 域名访问，这将帮助中国的开发者更加容易获取我们的内容。
在 .cn 域名上，我们已向您提供所有镜像后的内容，并提供支持的语言版本。
Web.dev 中国开…
Chrome浏览器 安装Vue插件vue-devtools
前言
vue-devtools 是一个为 Vue.js 开发者设计的 Chrome 插件。它可以让你更轻松地审查和调试 Vue 应用程序。与普通的浏览器控制台工具不同，Vue.js devtools 专为 Vue 的响应性数据和组件结构量身定做。
1. 功能介绍
组件树浏览：这个功能可以让你查…
自定义Chrome的浏览器开发者工具DevTools界面的字体和样式
Chrome浏览器开发者工具默认的字体太小，想要修改但没有相关设置。
外观——字体可以自定义字体，但大小不可以调整。
github上有人给出了方法
整理为中文教程：
1.打开浏览器开发者工具，点开设置——实验，勾上红框设…
chrome安装vue插件 vue-devtools
第一步：获取 Vue DevTools 插件 你只要打开 Chrome 网上应用店，搜索 “Vue.js Devtools”，找到官方插件并点击添加至 Chrome（通常显示为“添加至 Chrome”按钮）。 第二步：安装插件 如果你点击了添加至 Chro…
【C#】用CefSharp.ChromiumWebBrowser做winform开发过程中遇到的一些坑
文章目录 使用键盘F5刷新、F12打开控制台浏览器默认下载弹窗禁用GPU配置 使用键盘F5刷新、F12打开控制台
public class CEFKeyBoardHander : IKeyboardHandler
{public bool OnKeyEvent(IWebBrowser browserControl, IBrowser browser, KeyType type, int windowsKeyCode, int…
如何快速使用Vue3在electron项目开发chrome Devtools插件
1、建立Vue项目 为了方便快速建立项目，我已经写好脚手架，直接clone项目，快速开发 点击快速进入源代码
拉取代码
git clone https://github.com/xygengcn/electron-devtool.git安装依赖
yarn运行项目
yarn dev打包项目
yarn build2、安装…
vue3.2版本setup语法糖
setup语法糖：
一、Vue3.0 <script>里定义的变量、属性和方法必须 return 出来，<template>中才能使用；这样会导致在页面上变量会出现很多次。vue3.2只需在script标签中添加setup，就可以帮助我们解决这个问题,无需再写…
前端主流浏览器兼容写法（css、js）以及主流框架vue,react的兼容性
前言：
前端样式很重要，但是因为浏览器种类繁多，内核不同，会导致各种兼容问题。尤其ie，但好在微软对ie不在更新了。
常见浏览器：
常见的浏览器有：IE、Edge（替代了ie）、…
Chrome Devtools 调试指南
Chrome DevTools 是一套内置于 Google Chrome 浏览器的开发者工具，可以帮助开发者进行网页和应用的调试、优化和测试。以下是一些基本的调试指南： 打开 Chrome DevTools： 你可以通过以下方式之一打开 DevTools： 右键点击页面上的任…
vue3使用vue-router嵌套路由(多级路由)
Vue3 嵌套路由的使用和 Vue2 相差不大，主要的区别是 Vue3 的路由实例化使用了 createApp() 方法，所以实例化路由时需要传入根组件。另外，Vue3 的路由对象除了包含 Vue2 中的导航守卫、导航钩子和解析守卫等功能外，还新增了 meta p…
GPS从入门到放弃（九）、伪距与载波相位 （扩展）
感谢 GNSS伪距及载波相位观测模型_Chaoz3的博客-CSDN博客_载波相位观测方程 前言
最小二乘与卡尔曼滤波是目前GNSS定位中主流的二类平差滤波方法，而构建观测模型是此二类方法的关键步骤。本篇从伪距和载波相位观测方程出发，推导了伪距单点定位&#x…