墨一鉴
墨一鉴

Chrome开发者工具(DevTools)使用技巧

9大功能面板

  1. Elements元素面板：检查和调整页面，调试DOM和CSS
  2. Network网络面板：调试请求，了解页面静态资源分布，网页性能检测
  3. Console控制台面板：调试JavaScript，查看日志，交互式代码调试
  4. Sources源代码资源面板：调试JavaScript页面源代码，进行断点调试
  5. Application应用面板：查看和调试客户端存储，如Cookie、LocalStorage、SessionStorage
  6. Performance性能面板：查看页面性能细节，细粒度对网页载入进行性能优化
  7. Memory内存面板：JavaScript CPU分析器，内存堆分析器
  8. Security安全面板：查看页面安全及证书问题
  9. Audis面板：使用Google Lighthouse辅助性能分析，给出优化建议

打开方式

  • 在Chrome菜单中选择：更多工具 > 开发者工具
  • 在页面元素上右键点击，选择“检查”
  • 使用快捷键：
    • command + option + I (mac) 或 Ctrl + shift + I (Windows) 打开最近关闭的状态
    • command + option + C (mac) 或 Ctrl + shift + C (Windows) 直接打开Elements元素面板
    • command + option + J (mac) 或 Ctrl + shift + J (Windows) 直接打开Console控制台面板

禁用缓存

  1. 切换到“Network”网络面板
  2. 勾选“Disable cache”项

Chrome开发者工具(DevTools)使用技巧_第1张图片

手动清理网站缓存

  1. 按 command + shift + p （windows 按 Ctrl + shift + p），弹出命令输入框
  2. 输入 “clear site data”
  3. 敲回车键

Chrome开发者工具(DevTools)使用技巧_第2张图片

弹出命令输入框

Chrome开发者工具(DevTools)使用技巧_第3张图片

输入命令

此操作能清空Cookies、WebSQL、Service Workers、Cache Storage、IndexedDB、Local Storage、Application Cache

展开某标签下所有层级的标签

  1. 切换 “Elements" 元素面板
  2. 按住 Alt 键点击某个文档节点左侧的小箭头

Chrome开发者工具(DevTools)使用技巧_第4张图片

强制设置元素的状态

  1. 选中元素
  2. 点击Style面板下的“ :hov ” 按钮
  3. 勾选要切换的状态

Chrome开发者工具(DevTools)使用技巧_第5张图片

查找某元素绑定的事件

  1. 切换 “Elements" 元素面板，点击文档节点
  2. 选择 “Event Listeners” 页签
  3. 展开相应的事件名，如“click”
  4. 对 “handler” 点击右键，选择 “Show funciton definition”

Chrome开发者工具(DevTools)使用技巧_第6张图片

选择文档节点

Chrome开发者工具(DevTools)使用技巧_第7张图片

选择 Event Listeners 页签

Chrome开发者工具(DevTools)使用技巧_第8张图片

展开事件

Chrome开发者工具(DevTools)使用技巧_第9张图片

右键“handler”

Chrome开发者工具(DevTools)使用技巧_第10张图片

定位结果

打开某个资源文件

  1. 按 command + p （windows 按 Ctrl + p），弹出文件搜索框
  2. 输入文件名
  3. 敲回车键

Chrome开发者工具(DevTools)使用技巧_第11张图片

弹出文件搜索框

Chrome开发者工具(DevTools)使用技巧_第12张图片

输入文件名

快速定位源代码行数

  1. 按 command + p （windows 按 Ctrl + p），弹出输入框
  2. 输入 :行数，如 ":480"
  3. 敲回车键

Chrome开发者工具(DevTools)使用技巧_第13张图片

格式化代码

点击已打开文件左下角的花括号按钮

Chrome开发者工具(DevTools)使用技巧_第14张图片

Chrome开发者工具(DevTools)使用技巧_第15张图片

格式化结果

对某行代码打断点

  • 点击代码左侧的行号
  • 鼠标移至代码中的变量可实时查看值

Chrome开发者工具(DevTools)使用技巧_第16张图片

QQ20190822-134244.png

监听断点环境下的变量

  1. 切换 “watch” 面板
  2. 点击 “ + ” 按钮
  3. 输入要监听的变量
  4. 敲回车键

Chrome开发者工具(DevTools)使用技巧_第17张图片

Chrome开发者工具(DevTools)使用技巧_第18张图片

查找加载图片的代码

  1. 切换 “Network” 网络面板
  2. 点击 “Initiator” 列下的文件名

Chrome开发者工具(DevTools)使用技巧_第19张图片

Chrome开发者工具(DevTools)使用技巧_第20张图片

定位结果

全局查询请求头和响应体

  1. 切换 “Network” 页签
  2. 点击左上角的“放大镜”按钮
  3. 在弹出的搜索框中输入要查询的内容
  4. 敲回车键

Chrome开发者工具(DevTools)使用技巧_第21张图片

Chrome开发者工具(DevTools)使用技巧_第22张图片

QQ20190822-090016.png

切换网络模式

  1. 切换 Network 网络面板
  2. 点击 “ online ” 下拉面板
  3. 选择要切换的网络模式

Chrome开发者工具(DevTools)使用技巧_第23张图片

Chrome开发者工具(DevTools)使用技巧_第24张图片

限制网速

  1. 切换 Network 网络面板
  2. 点击 “ online ” 下拉面板
  3. 选择 “ add ” 选项
  4. 点击 “ Add custom profile... ” 按钮
  5. 依次输入“Profile Name”、“Download”、“Upload”等输入项
  6. 点击 "Add" 按钮
  7. 回到 Network 网络面板切换所新增的网络模式

Chrome开发者工具(DevTools)使用技巧_第25张图片

Chrome开发者工具(DevTools)使用技巧_第26张图片

Chrome开发者工具(DevTools)使用技巧_第27张图片

Chrome开发者工具(DevTools)使用技巧_第28张图片

Chrome开发者工具(DevTools)使用技巧_第29张图片

在Console控制台查找DOM

  1. 切换到Console控制台面板
  2. 输入：document.querySelectorAll("#APP")
  3. 敲回车键，展开输出结果，点击红色框位置将会跳转到相应的元素节点

Chrome开发者工具(DevTools)使用技巧_第30张图片

跳转结果

在控制台中输入多行代码

按住Shift键敲回车即可换行

Chrome开发者工具(DevTools)使用技巧_第31张图片

Chrome开发者工具(DevTools)使用技巧_第32张图片

换行效果

手动添加Cookie

  1. 在Application面板中按 esc 键，打开控制台面板
  2. 输入：document.cookie = "test=1"

Chrome开发者工具(DevTools)使用技巧_第33张图片

手动添加LocalStorage

  1. 在Application面板中按 esc 键，打开控制台面板
  2. 输入：localStorage.setItem('test', '1')

Chrome开发者工具(DevTools)使用技巧_第34张图片

模拟手机调试

点击 DevTools 左上角的手机图标按钮，如图：

手机调试面板菜单介绍

Chrome开发者工具(DevTools)使用技巧_第35张图片

打开传感器设置面板

  1. 按 command + shift + p （windows 按 Ctrl + shift + p），弹出命令输入框
  2. 输入 “ show Sensors ”
  3. 敲回车键

Chrome开发者工具(DevTools)使用技巧_第36张图片

传感器设置面板介绍

Chrome开发者工具(DevTools)使用技巧_第37张图片

QQ20190822-235212.png

设置网页 User agent

  1. 按 command + shift + p （windows 按 Ctrl + shift + p），弹出命令输入框
  2. 输入 “ show Network conditions ”
  3. 取消勾选 “ Select automatically ”
  4. 点击 “Custom...” 下拉框，选择相应的代理设备

Chrome开发者工具(DevTools)使用技巧_第38张图片

Chrome开发者工具(DevTools)使用技巧_第39张图片

QQ20190822-235730.png

截图

  1. 按 command + shift + p （windows 按 Ctrl + shift + p），弹出命令输入框
  2. 输入：screenshot
  3. 如下图选择相应的截图方式：
  • Capture area screenshot：截取某个区域（需要选择某个标签）
  • Capture full size screenshot：截取整个网页
  • Capture node screenshot：截取某个标签节点
  • Capture screenshot：截取当前可视区域

Chrome开发者工具(DevTools)使用技巧_第40张图片

集成 Vue.js 开发者工具

  1. 进入官网：https://cn.vuejs.org/
  2. 选择 “ 生态系统 ” 菜单下的 “ Devtools ”
  3. 下载源码后解压
  4. 在终端切换到解压后的文件目录
  5. 输入打包命令（需安装webpack）：cd shells/chrome && cross-env NODE_ENV=production webpack --progress --hide-modules
  6. 打开Chrome，输入网址：chrome://extensions/
  7. 点击按钮 “ 加载已解压的扩展程序 ”
  8. 选择 vue-devtools 目录下的 shell/chrome 即可

Chrome开发者工具(DevTools)使用技巧_第41张图片

Chrome开发者工具(DevTools)使用技巧_第42张图片

QQ20190823-002907.png

Chrome开发者工具(DevTools)使用技巧_第43张图片

Chrome开发者工具(DevTools)使用技巧_第44张图片

˙转载：https://www.jianshu.com/p/e366183e06f4

你可能感兴趣的:(基本功,前端,chrome,devtools)

  • Windows 窗口置顶工具推荐 如何始终置顶窗口 窗口前置 窗口固定 窗口钉在桌面 始终保持在其他窗口前端 在其他窗口之上 PowerToys MouseInc 七星关雎 Windows疑难杂症Windowswindows开源软件
    工具一：微软PowerToysReleases·microsoft/PowerToys·GitHubWindowssystemutilitiestomaximizeproductivity.Contributetomicrosoft/PowerToysdevelopmentbycreatinganaccountonGitHub.https://github.com/microsoft/PowerT
  • 深度解析智能问答系统：如何打造精准、高效的AI对话架构？ 和老莫一起学AI 人工智能架构自然语言处理产品经理语言模型学习ai
    在人工智能的飞速发展中，智能问答系统（QA系统）逐渐成为了企业内部管理、客户服务、搜索引擎等多个领域中的关键技术。今天，我们将深入探讨一个基于大模型、自然语言处理、知识检索的智能问答系统的架构，详细介绍其技术原理、流程以及未来应用前景。一、系统整体概览在这个智能问答系统中，整个流程可以大致划分为两大部分：前端问答生成与后端离线数据处理。前端部分是用户交互的核心，通过用户的输入、关键词提取、检索和问
  • 《中型 Vue 项目：挑战与成长》 计算机毕设定制辅导-无忧学长 #Vuevue.jsflutter前端
    一、引言在当今的前端开发领域，Vue作为一款渐进式JavaScript框架，以其强大的功能和灵活性备受开发者青睐。对于中型Vue项目而言，其重要性不言而喻。中型Vue项目通常在功能复杂度和规模上介于小型项目和大型项目之间，既需要应对一定的业务需求挑战，又要考虑开发效率和可维护性。中型Vue项目面临着诸多挑战与机遇。挑战方面，随着项目规模的扩大，代码的复杂性增加，如何进行有效的状态管理、组件化开发以
  • httpslocalhostindex 配置的nginx，一刷新就报404了 m0_74824112 nginx运维
    当你的Nginx配置导致页面刷新时报404错误时，通常是由于以下几个原因造成的：静态文件路径配置错误：Nginx没有正确地指向静态文件的目录。前端路由问题：如果是SPA（单页应用），刷新页面时Nginx没有正确地将请求重定向到入口文件（如index.html）。反向代理配置错误：如果Nginx作为反向代理，后端服务可能没有正确处理请求。检查和解决步骤1.检查静态文件路径配置确保Nginx配置文件中
  • 深度解析 React 合成事件：机制、作用及与 Vue 事件机制的对比 前端vue.jsreact
    在前端开发领域，React与Vue作为两款备受瞩目的框架，凭借独特的设计理念和技术架构，为开发者打造出截然不同的开发体验。React的合成事件是其核心亮点之一，Vue则采用了别具一格的事件处理机制，二者的差异背后蕴藏着多方面的考量。一、React合成事件的底层剖析（一）事件创建与封装细节当DOM事件触发，React会第一时间在内部事件池中检索对应的合成事件实例。若未找到，便依据原生事件类型，像cl
  • 如何使用wireshark 解密TLS-SSL报文 风清扬-独孤九剑 wireshark测试工具网络
    目录前言原理操作前言现在网站都是https或者很多站点都支持http2。这些站点为了保证数据的安全都通过TLS/SSL加密过，用wireshark并不能很好的去解析报文，我们就需要用wireshark去解密这些报文。我主要讲解下mac在chrome怎么配置的，浏览器一定要支持HTTP2。原理获取TLS握手阶段生成的密钥，也就是说通过Chrome浏览器DEBUG日志中的握手信息生成密钥，wiresh
  • 告别代码堆砌！AI生成前端页面，让开发效率飞升 前端
    在当今快节奏的数字世界中，前端开发效率至关重要。面对日益增长的市场需求和复杂的项目，开发者们常常面临着巨大的压力。而一款优秀的AI生成前端页面工具，无疑能成为提升效率的利器。本文将深入探讨谷歌Gemini的强大功能，并结合ScriptEcho——一款基于大模型AI技术的前端代码生成工具，展现如何将AI技术应用于前端开发，从而实现效率的显著提升。谷歌Gemini：AI赋能的未来谷歌Gemini的出现
  • 零售业的AI赋能与前端开发效率革命：ScriptEcho 的助力 前端
    零售业正经历着前所未有的数字化转型，但同时也面临着巨大的挑战。库存管理混乱、个性化客户体验不足等问题，严重制约着零售企业的盈利能力。而人工智能（AI）的兴起，为解决这些问题提供了新的思路。通过AI驱动的实时库存管理和客户行为分析，零售企业可以显著提升运营效率和客户满意度。然而，构建这些AI赋能的零售应用，需要强大的前端开发能力，这正是AI代码生成器ScriptEcho能够发挥关键作用的地方。AI赋
  • AI时代的前端开发：技能提升与职业发展之路 前端
    在瞬息万变的科技时代，个人职业发展的重要性日益凸显。提升技能，不断学习，已经不再是锦上添花，而是立足之本，是我们在竞争激烈的职场中脱颖而出的关键。而人工智能（AI）技术的快速发展，为我们提供了前所未有的机遇，特别是对于前端开发领域，AI正以前所未有的速度改变着我们的工作方式和学习方式。AI赋能前端开发：个性化学习路径前端开发领域的技术栈庞大而复杂，涵盖HTML、CSS、JavaScript、各种框
  • 出海工具集 web前端进阶者 前端
    群聊分享的一个工具集合，看了几个，感觉有点子用，收藏一波，下面有GitHub的地址；吃水不忘挖井人；GitHub地址分类目录导航Web开发框架或模板Chrome插件开发前端开发后端开发数据库管理对象关系映射（ORM）样式与UI框架原型设计认证与授权支付集成邮件服务网站分析在线客服和反馈服务部署与托管网站管理域名注册文档管理协议生成图标资源字体资源图片视频素材图片视频处理工具屏幕录制短链或长链信息渠
  • Arch - 架构安全性_验证（Verification） 小小工匠 【凤凰架构】架构验证Verification
    文章目录OverView导图1.引言：数据验证的重要性概述2.数据验证的基本概念3.数据验证的层次前端验证后端验证4.数据验证的标准做法5.自定义校验注解6.校验结果的处理7.性能考虑与副作用8.小结OverView即使只限定在“软件架构设计”这个语境下，系统安全仍然是一个很大的话题。接下来我们将对系统安全架构的各个方面进行详细分析，包括认证、授权、凭证、保密、传输安全和验证，结合案例实践，展示如
  • 如何利用 Dexie.js 管理前端状态或持久化复杂数据 maply Node.jsvue前端javascript状态模式Dexie.js前端状态管理前端状态持久化vue.js
    使用Dexie.js管理前端状态或持久化复杂数据Dexie.js是一个功能强大的IndexedDB封装库，不仅适用于简单的离线存储，还非常适合管理前端状态和持久化复杂数据。以下是如何利用Dexie.js管理前端状态或持久化复杂数据的详细介绍：1.Dexie.js管理前端状态的优势数据持久化：将应用状态存储在浏览器中，即使刷新页面或关闭浏览器，状态仍然存在。异步数据操作：支持异步读取和写入，提高性能
  • SpringBoot3使用Swagger3 m0_74825260 java
    SpringBoot3使用Swagger3项目中的后端接口进行简单的前端展示一、依赖引入二、快速启动1.在application.yml中配置2.或者properties文件,则配置3.启动项目访问swagger三、使用注解标注接口Swagger配置文件Swagger注解迁移举例五种常用@Api@ApiOperation@ApiImplicitParam@ApiModel@ApiModelProp
  • 如何使用python爬图片 小雨帅 python开发语言
    一、说明使用Python爬取图片（或其他类型的文件）通常是为了自动化从互联网上下载图片的过程，这样可以节省人工下载的时间和精力，尤其是在需要大量图片时，下面将介绍两种方法，方法二步骤稍微多些，但可以爬取防爬虫的网站上的图片。二、准备安装python，谷歌浏览器，下载chromedriver，注意chromedriver的版本必须兼容谷歌浏览器，否则在运行python代码时会报错，在windows操
  • Microi 吾码与 JavaScript：前端低代码平台的强大组合 小周不想卷 javascript
    目录一、引言二、Microi吾码概述三、JavaScript在Microi吾码前端开发中的应用（一）前端V8引擎与JavaScript（二）接口引擎与JavaScript四、JavaScript在Microi吾码后端开发中的协同（一）与C#后端框架的交互（二）利用gRPC实现跨语言通信五、Microi吾码中JavaScript与数据库的交互六、Microi吾码中JavaScript在表单与模板引擎
  • 一款前端开源的，在线电子表格univer介绍
    Univer是一款颠覆性的在线电子表格解决方案，为数据输入和协作带来了全新的方式。作为一款开源、免费的平台，Univer专注于在线电子表格管理，为用户提供了处理数据、创建动态报告和高效协作的无缝体验。具体可以看他们的官网univer.ai.Excel作为广受欢迎的电子表格软件，Univer的兼容性和功能性使其成为Excel爱好者的理想选择。用户可以体验到与Excel相关的功能，并且能够轻松使用带公
  • Axios封装一款前端项目网络请求实用插件 smart_ljh 前端vue.jsvuejsaxios网络
    前端项目开发非常经典的插件axios大家都很熟悉，它是一个Promise网络请求库，可以用于浏览器和node.js支持的项目中。像一直以来比较火的Vue.js开发的几乎所有项目网络请求用的都是axios。那么我们在实际的项目中，有时候为了便于维护、请求头信息统一处理、统一拦截器设置以及响应数据统一处理，需要在项目中针对axios封装一个网络请求插件。接下来就介绍一下针对以上这些输出具体的解决方案和
  • 解锁新技能：Windows Forms与ASP.NET API的梦幻联动 步、步、为营 windowsasp.net后端
    一、开篇引入嘿，各位开发小伙伴们！在日常开发的“战场”上，我们常常会遭遇一个棘手的难题：如何让前端应用与后端服务实现高效且稳定的交互呢？特别是在使用WindowsForms构建桌面应用程序时，这个问题尤为突出。想象一下，你精心打造了一个功能强大的WindowsForms应用，满心期待它能与后端的ASP.NETAPI顺畅“对话”，实现数据的实时获取与更新，为用户带来绝佳的体验。但现实却可能给你泼一盆
  • 云原生前端开发：打造现代化高性能的用户体验 大梦百万秋 知识学爆状态模式
    引言：前端开发的新风向在过去的几年中，前端开发领域经历了快速的演变，从早期的静态网页到如今复杂的单页应用（SPA），再到微前端架构和渐进式Web应用（PWA），前端技术一直处于技术变革的中心。而随着云原生的理念在后端开发中逐渐成熟，前端开发也迎来了新的机遇和挑战。云原生前端开发意味着应用的架构设计和开发方式需要更加注重现代化的开发工具链、灵活性、性能优化和可扩展性。本文将从技术角度讨论如何运用云原
  • 一句话就能回答的前端面试题（2024年10月最新版） 小姐姐呀～ 前端javascriptvue
    1、v-if和v-show的区别相同点:v-if和v-show都可以控制dom元素的展示和隐藏不同点：v-if的显示隐藏是将dom元素整个添加或删除而v-show的隐藏是为该元素添加CSS样式display:none,dom元素还在一般进入页面不需要频繁显示或隐藏就用v-if2、data()为什么是一个函数为了防止多个组件实例对象共用一个data，产生数据污染3、什么是闭包闭包就是内部函数定义一个
  • JSON数据格式转换 百事老饼干 前端积累json
    在前端Vue3中，处理JSON数据通常涉及到从API获取JSON、解析JSON数据、或者将JavaScript对象转换为JSON字符串。这里是几种常见的JSON转换操作一、从JSON字符串解析为JavaScript对象如果你从API或其他地方收到一个JSON字符串，可以使用JSON.parse()来将它转换为JavaScript对象。letjsonString='{"name":"John","a
  • VUE前端实现防抖节流 Lodash 百事老饼干 前端积累前端
    方法一：采用Lodash工具库Lodash是一个一致性、模块化、高性能的JavaScript实用工具库。（1）采用终端导入Lodash库$npmi-gnpm$npmi--savelodash（2）应用示例：搜索框输入防抖在这个示例中，我们希望用户在输入框中停止输入500毫秒后才执行搜索操作，避免频繁请求.//假设这是一个执行搜索操作的函数functionperformSearch(query){c
  • 学生作业-学生选课系统，后端SpringBoot + maven，前端vue。涉及管理员、学生和教师三个角色。教师可设置课程信息以及学生成绩录入；学生可选课和查看成绩。源码中包含MySQ数据表sql。 程序员WANG vue.js前端springboot
    1、学生作业-学生选课系统，后端SpringBoot+maven，前端vue。涉及管理员、学生和教师三个角色。教师可设置课程信息以及学生成绩录入；学生可选课和查看成绩。2、源码中包含数据表，sql文件，mysql数据库，可一键导入。3、管理员账号和密码root、root；学生和教师的账号请查看数据表，密码均为123456。4、Management是后端代码，vue是前端vue代码，按照正常启动（v
  • 如何使用 Python 和 Selenium WebDriver 获取 localStorage 潮易 pythonselenium开发语言
    如何使用Python和SeleniumWebDriver获取localStorage要使用Python和SeleniumWebDriver获取localStorage，您可以遵循以下步骤：###1.安装必要的库首先，您需要安装selenium库。可以通过pip进行安装：```bashpipinstallselenium```###2.下载WebDriver根据您的浏览器类型（如Chrome、Fir
  • 【前端】Layui的表格常用功能，表单提交事件，表格下拉按钮点击事件，表格外的按钮点击事件 m0_74824823 vip1024p前端layuijavascript
    欢迎来到《小5讲堂》大家好，我是。这是《前端》系列文章，每篇文章将以博主理解的角度展开讲解，特别是针对知识点的概念进行叙说，大部分文章将会对这些概念进行实际例子验证，以此达到加深对知识点的理解和掌握。温馨提示：博主能力有限，理解水平有限，若有不对之处望指正！目录前言核心方法常用模块表单按钮事件表格字段事件文章推荐前言最近在维护老系统，尽量使用过layui，但是时间久了，总会忘记一些方法的使用。因此
  • 用python操作浏览器的三种方式_经验 | python 操作浏览器的三种方式 weixin_39642619
    第一种：selenium导入浏览器驱动，用get方法打开浏览器，例如：importtimefromseleniumimportwebdriverdefmac():#browser=webdriver.Chrome()#browser=webdriver.Firefox()browser=webdriver.Ie()browser.implicitly_wait(5)browser.get("htt
  • [20250119]-前端面试题——React篇 前端
    [20250119]-前端面试题——React篇面试问题记录问题1请简单介绍一下React18有哪些更新。回答：React18的主要更新包括：并发渲染：React18引入了并发渲染（ConcurrentRendering），使得React能在后台进行渲染工作，避免阻塞UI更新，提升性能。自动批处理：React18会自动批处理多次setState更新，减少不必要的渲染，提升性能。useIdHook：
  • 探索JavaScript的宇宙：《JS星球系统》 潘俭渝Erik
    探索JavaScript的宇宙：《JS星球系统》solar-system-of-jsVisualizethelanguagesontheJSplatform项目地址:https://gitcode.com/gh_mirrors/so/solar-system-of-js在快速发展的前端世界中，JavaScript已经成为无可争议的主宰，围绕它的语言和框架如群星璀璨，构成了一个壮观的“JS星球系统”
  • 【Python爬虫实战】轻量级爬虫利器：DrissionPage之SessionPage与WebPage模块详解 易辰君 python爬虫python爬虫开发语言
    个人主页：易辰君-CSDN博客系列专栏：https://blog.csdn.net/2401_86688088/category_12797772.html目录前言一、SessionPage（一）SessionPage模块的基本功能（二）基本使用（三）常用方法（四）页面元素定位和数据提取（五）Cookie和会话管理（六）SessionPage的优点和局限性（七）SessionPage和Driver
  • HarmonyOS 开发实战 —— 模块化架构组件 （使用系统路由表+注解+hvigor插件 自动配置项目模块化） CTrup 鸿蒙开发HarmonyOS移动开发harmonyos架构uiArkUI组件化插件化hvigor
    往期笔录记录：鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……@satis/oh-router简介@sati
  • knob UI插件使用 换个号韩国红果果 JavaScriptjsonpknob
    图形是用canvas绘制的 js代码 var paras = { max:800, min:100, skin:'tron',//button type thickness:.3,//button width width:'200',//define canvas width.,canvas height displayInput:'tr
  • Android+Jquery Mobile学习系列(5)-SQLite数据库 白糖_ JQuery Mobile
    目录导航   SQLite是轻量级的、嵌入式的、关系型数据库，目前已经在iPhone、Android等手机系统中使用,SQLite可移植性好，很容易使用，很小，高效而且可靠。   因为Android已经集成了SQLite，所以开发人员无需引入任何JAR包，而且Android也针对SQLite封装了专属的API，调用起来非常快捷方便。   我也是第一次接触S
  • impala-2.1.2-CDH5.3.2 dayutianfei impala
    最近在整理impala编译的东西，简单记录几个要点： 根据官网的信息（https://github.com/cloudera/Impala/wiki/How-to-build-Impala）： 1. 首次编译impala，推荐使用命令： ${IMPALA_HOME}/buildall.sh -skiptests -build_shared_libs -format 2.仅编译BE ${I
  • 求二进制数中1的个数 周凡杨 java算法二进制
    解法一： 对于一个正整数如果是偶数，该数的二进制数的最后一位是 0 ，反之若是奇数，则该数的二进制数的最后一位是 1 。因此，可以考虑利用位移、判断奇偶来实现。   public int bitCount(int x){ int count = 0; while(x!=0){ if(x%2!=0){ /
  • spring中hibernate及事务配置 g21121 Hibernate
    hibernate的sessionFactory配置： <!-- hibernate sessionFactory配置 --> <bean id="sessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFactoryBean"> <
  • log4j.properties 使用 510888780 log4j
    log4j.properties 使用 一.参数意义说明 输出级别的种类 ERROR、WARN、INFO、DEBUG ERROR 为严重错误 主要是程序的错误 WARN 为一般警告，比如session丢失 INFO 为一般要显示的信息，比如登录登出 DEBUG 为程序的调试信息 配置日志信息输出目的地 log4j.appender.appenderName = fully.qua
  • Spring mvc-jfreeChart柱图（2） 布衣凌宇 jfreechart
    上一篇中生成的图是静态的，这篇将按条件进行搜索，并统计成图表，左面为统计图，右面显示搜索出的结果。 第一步：导包 第二步；配置web.xml(上一篇有代码) 建BarRenderer类用于柱子颜色 import java.awt.Color; import java.awt.Paint; import org.jfree.chart.renderer.category.BarR
  • 我的spring学习笔记14-容器扩展点之PropertyPlaceholderConfigurer aijuans Spring3
    PropertyPlaceholderConfigurer是个bean工厂后置处理器的实现，也就是BeanFactoryPostProcessor接口的一个实现。关于BeanFactoryPostProcessor和BeanPostProcessor类似。我会在其他地方介绍。 PropertyPlaceholderConfigurer可以将上下文（配置文件）中的属性值放在另一个单独的标准java
  • maven 之 cobertura 简单使用 antlove maventestunitcoberturareport
    1. 创建一个maven项目 2. 创建com.CoberturaStart.java package com; public class CoberturaStart { public void helloEveryone(){ System.out.println("=================================================
  • 程序的执行顺序 百合不是茶 JAVA执行顺序
          刚在看java核心技术时发现对java的执行顺序不是很明白了,百度一下也没有找到适合自己的资料,所以就简单的回顾一下吧   代码如下;     经典的程序执行面试题 //关于程序执行的顺序 //例如： //定义一个基类 public class A(){ public A(
  • 设置session失效的几种方法 bijian1013 web.xmlsession失效监听器
    在系统登录后，都会设置一个当前session失效的时间，以确保在用户长时间不与服务器交互，自动退出登录，销毁session。具体设置很简单，方法有三种：（1）在主页面或者公共页面中加入：session.setMaxInactiveInterval(900);参数900单位是秒，即在没有活动15分钟后，session将失效。这里要注意这个session设置的时间是根据服务器来计算的，而不是客户端。所
  • java jvm常用命令工具 bijian1013 javajvm
    一.概述         程序运行中经常会遇到各种问题，定位问题时通常需要综合各种信息，如系统日志、堆dump文件、线程dump文件、GC日志等。通过虚拟机监控和诊断工具可以帮忙我们快速获取、分析需要的数据，进而提高问题解决速度。 本文将介绍虚拟机常用监控和问题诊断命令工具的使用方法，主要包含以下工具:       &nbs
  • 【Spring框架一】Spring常用注解之Autowired和Resource注解 bit1129 Spring常用注解
    Spring自从2.0引入注解的方式取代XML配置的方式来做IOC之后，对Spring一些常用注解的含义行为一直处于比较模糊的状态，写几篇总结下Spring常用的注解。本篇包含的注解有如下几个： Autowired Resource Component Service Controller Transactional 根据它们的功能、目的，可以分为三组，Autow
  • mysql 操作遇到safe update mode问题 bitray update
        我并不知道出现这个问题的实际原理,只是通过其他朋友的博客,文章得知的一个解决方案,目前先记录一个解决方法,未来要是真了解以后,还会继续补全.     在mysql5中有一个safe update mode,这个模式让sql操作更加安全,据说要求有where条件,防止全表更新操作.如果必须要进行全表操作,我们可以执行 SET
  • nginx_perl试用 ronin47 nginx_perl试用
    因为空闲时间比较多，所以在CPAN上乱翻，看到了nginx_perl这个项目(原名Nginx::Engine)，现在托管在github.com上。地址见：https://github.com/zzzcpan/nginx-perl 这个模块的目的，是在nginx内置官方perl模块的基础上，实现一系列异步非阻塞的api。用connector/writer/reader完成类似proxy的功能（这里
  • java-63-在字符串中删除特定的字符 bylijinnan java
    public class DeleteSpecificChars { /** * Q 63 在字符串中删除特定的字符 * 输入两个字符串，从第一字符串中删除第二个字符串中所有的字符。 * 例如，输入”They are students.”和”aeiou”，则删除之后的第一个字符串变成”Thy r stdnts.” */ public static voi
  • EffectiveJava--创建和销毁对象 ccii 创建和销毁对象
    本章内容： 1. 考虑用静态工厂方法代替构造器 2. 遇到多个构造器参数时要考虑用构建器（Builder模式） 3. 用私有构造器或者枚举类型强化Singleton属性 4. 通过私有构造器强化不可实例化的能力 5. 避免创建不必要的对象 6. 消除过期的对象引用 7. 避免使用终结方法 1. 考虑用静态工厂方法代替构造器     类可以通过
  • [宇宙时代]四边形理论与光速飞行 comsci
       从四边形理论来推论 为什么光子飞船必须获得星光信号才能够进行光速飞行？    一组星体组成星座  向空间辐射一组由复杂星光信号组成的辐射频带，按照四边形-频率假说  一组频率就代表一个时空的入口    那么这种由星光信号组成的辐射频带就代表由这些星体所控制的时空通道，该时空通道在三维空间的投影是一
  • ubuntu server下python脚本迁移数据 cywhoyi pythonKettlepymysqlcx_Oracleubuntu server
    因为是在Ubuntu下，所以安装python、pip、pymysql等都极其方便，sudo apt-get install pymysql， 但是在安装cx_Oracle（连接oracle的模块）出现许多问题，查阅相关资料，发现这边文章能够帮我解决，希望大家少走点弯路。http://www.tbdazhe.com/archives/602 1.安装python 2.安装pip、pymysql
  • Ajax正确但是请求不到值解决方案 dashuaifu Ajaxasync
    Ajax正确但是请求不到值解决方案   解决方案：1 .     async: false ,    2.     设置延时执行js里的ajax或者延时后台java方法！！！！！！！   例如：   $.ajax({     &
  • windows安装配置php+memcached dcj3sjt126com PHPInstallmemcache
    Windows下Memcached的安装配置方法 1、将第一个包解压放某个盘下面，比如在c:\memcached。 2、在终端（也即cmd命令界面）下输入 'c:\memcached\memcached.exe -d install' 安装。 3、再输入： 'c:\memcached\memcached.exe -d start' 启动。（需要注意的: 以后memcached将作为windo
  • iOS开发学习路径的一些建议 dcj3sjt126com ios
    iOS论坛里有朋友要求回答帖子，帖子的标题是： 想学IOS开发高阶一点的东西，从何开始，然后我吧啦吧啦回答写了很多。既然敲了那么多字，我就把我写的回复也贴到博客里来分享，希望能对大家有帮助。欢迎大家也到帖子里讨论和分享，地址：http://bbs.csdn.net/topics/390920759   下面是我回复的内容：   结合自己情况聊下iOS学习建议，
  • Javascript闭包概念 fanfanlovey JavaScript闭包
    1.参考资料 http://www.jb51.net/article/24101.htm http://blog.csdn.net/yn49782026/article/details/8549462 2.内容概述 要理解闭包，首先需要理解变量作用域问题 内部函数可以饮用外面全局变量 var n=999; 　　functio
  • yum安装mysql5.6 haisheng mysql
    1、安装http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm   2、yum install mysql   3、yum install mysql-server   4、vi /etc/my.cnf   添加character_set_server=utf8
  • po/bo/vo/dao/pojo的详介 IT_zhlp80 javaBOVODAOPOJOpo
        JAVA几种对象的解释 PO:persistant object持久对象,可以看成是与数据库中的表相映射的java对象。最简单的PO就是对应数据库中某个表中的一条记录，多个记录可以用PO的集合。PO中应该不包含任何对数据库的操作. VO:value object值对象。通常用于业务层之间的数据传递，和PO一样也是仅仅包含数据而已。但应是抽象出的业务对象,可
  • java设计模式 kerryg java设计模式
    设计模式的分类：    一、 设计模式总体分为三大类： 1、创建型模式（5种）：工厂方法模式，抽象工厂模式，单例模式，建造者模式，原型模式。 2、结构型模式（7种）：适配器模式，装饰器模式，代理模式，外观模式，桥接模式，组合模式，享元模式。 3、行为型模式（11种）：策略模式，模版方法模式，观察者模式，迭代子模式，责任链模式，命令模式，备忘录模式，状态模式，访问者
  • [1]CXF3.1整合Spring开发webservice——helloworld篇 木头.java springwebserviceCXF
    Spring 版本3.2.10 CXF 版本3.1.1 项目采用MAVEN组织依赖jar 我这里是有parent的pom，为了简洁明了，我直接把所有的依赖都列一起了，所以都没version，反正上面已经写了版本 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht
  • Google 工程师亲授：菜鸟开发者一定要投资的十大目标 qindongliang1922 工作感悟人生
    身为软件开发者，有什么是一定得投资的？ Google 软件工程师 Emanuel Saringan 整理了十项他认为必要的投资，第一项就是身体健康，英文与数学也都是必备能力吗？来看看他怎么说。（以下文字以作者第一人称撰写）） 你的健康 无疑地，软件开发者是世界上最久坐不动的职业之一。 每天连坐八到十六小时，休息时间只有一点点，绝对会让你的鲔鱼肚肆无忌惮的生长。肥胖容易扩大罹患其他疾病的风险，
  • linux打开最大文件数量1,048,576 tianzhihehe clinux
    File descriptors are represented by the C int type. Not using a special type is often  considered odd, but is, historically, the Unix way. Each Linux process has a maximum number of files th
  • java语言中PO、VO、DAO、BO、POJO几种对象的解释 衞酆夼 javaVOBOPOJOpo
    PO:persistant object持久对象 最形象的理解就是一个PO就是数据库中的一条记录。好处是可以把一条记录作为一个对象处理，可以方便的转为其它对象。可以看成是与数据库中的表相映射的java对象。最简单的PO就是对应数据库中某个表中的一条记录，多个记录可以用PO的集合。PO中应该不包含任何对数据库的操作。 BO:business object业务对象 封装业务逻辑的java对象
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他