pangmiao、
pangmiao、

Chrome DevTools

概述

打开开发工具

  • 当您想使用 DOM 或 CSS 时，右键单击页面上的元素并选择 Inspect 以跳转到 Elements 面板。或按 Command+Option+C (Mac) 或 Control+Shift+C（Windows、Linux、ChromeOS）。
  • 如果您想查看记录的消息或运行 JavaScript，请按 Command+Option+J (Mac) 或 Control+Shift+J（Windows、Linux、ChromeOS）直接跳转到控制台面板。
  • 打开你打开的最后一个面板，按 Command+ Option+ I(Mac) 或 Control+ Shift+ I
  • 从 Chrome 主菜单打开 DevTools，单击自定义和控制 Google Chrome 自定义和控制谷歌 Chrome 浏览器，然后选择更多工具>开发人员工具。
  • 在每个新选项开上自动打开 DevTools，从命令行打开 Chrome 并传递 --auto-open-devtools-for-tabs 标志。

苹果电脑

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs

这仅在 Chrome 实例尚未运行时才有效。从那时起，每个新标签页都会自动打开 DevTools，直到用户完全退出 Chrome。

命令和快捷方式

命令菜单提供了一种快速浏览 Chrome DevTools UI 和完成常见任务的方法，例如禁用 JavaScript。您可能熟悉 Visual Studio Code 中称为 Command Palette 的类似功能，它是 Command Menu 的最初灵感来源。

打开命令菜单：

  • 按 Control+ Shift+ P(Windows / Linux) 或 Command+ Shift+ P(Mac)。
  • 单击自定义和控制 DevTools。 自定义和控制 DevTools，然后选择运行命令。

打开文件：

如果您使用打开命令菜单中概述的工作流程，命令菜单将打开，并 Run >在文本框中添加前缀。

要改为打开文件，请删除该>字符并开始键入文件名。Run 变为 Open, DevTools 取而代之的是搜索相关文件。

或者，您可以通过以下方式之一直接进入“打开文件”菜单：

  • 按 Control+ P(Windows / Linux) 或 Command+ P(Mac)。
  • 单击自定义和控制 DevTools。 然后选择打开文件。
打开被忽略的文件

这是实验性的。Chrome 版本 106 中可用的预览功能。

默认情况下，DevTools 会隐藏已知第三方的文件。要从菜单中打开此类文件，请禁用 Sources 面板中的‘隐藏已忽略列表的来源’选项。

查看其他可用操作

要查看命令菜单中可用的其他操作，请删除 > 字符并键入 ?

禁用 JavaScript

要查看禁用 JavaScript 时网页的外观和行为:

  • 打开 Chrome 开发者工具
  • 按 Control+Shift+P 或 Command+Shift+P (Mac) 打开 Command Menu。
  • 键入 javascript 选择 Disable JavaScript，然后按 Enter 运行命令。Sources 旁边的黄色警告图标提醒您 JavaScript 已禁用。

要重新启用 JavaScript：

  • 再次打开命令菜单并运行启用 JavaScript 命令。
  • 关闭开发工具。

键盘快捷键

打开 DevTools 的键盘快捷键

要打开 DevTools，请在光标位于浏览器视口上时按以下键盘快捷键：

动作 Mac Windows / Linux
打开您上次使用的任何面板 Command+ Option+I F12 或 Control+ Shift+I
打开控制台面板 Command+ Option+J Control+ Shift+J
打开元素面板 Command+ Shift+C 或 Command+ Option+C Control+ Shift+C

全局键盘快捷键

以下键盘快捷键在大多数（如果不是全部）DevTools 面板中可用。

动作 Mac Windows / Linux
显示设置 ?或 Function+F1 ?或者 F1
聚焦下一个面板 Command+] Control+]
聚焦上一个面板 Command+[ Control+[
切换回您上次使用的任何对接位置。如果 DevTools 在整个会话中一直处于其默认位置，则此快捷方式将 DevTools 取消停靠到单独的窗口中 Command+ Shift+D Control+ Shift+D
切换设备模式 Command+ Shift+M Command+ Shift+M
切换检查元素模式 Command+ Shift+C Control+ Shift+C
打开命令菜单 Command+ Shift+P Command+ Shift+P
切换抽屉 Escape Escape
正常重载 Command+R F5 或 Control+R
硬重装 Command+ Shift+R Control+F5 或 Control+ Shift+R
在当前面板中搜索文本。仅在 Elements、Console、Sources、Performance、Memory、JavaScript Profiler 和 Quick Source 面板中受支持。 Command+F Control+F
在 Drawer 中打开 Search 选项卡，让您可以在所有加载的资源中搜索文本 Command+ Option+F Control+ Shift+F
在“源”面板中打开文件 Command+O 或 Command+P Control+O 或 Control+P
放大 Command+ Shift++ Control+ Shift++
缩小 Command± Control±
恢复默认缩放级别 Command+0 Control+0
运行片段 按 Command+O，键入!跟脚本的名称，按 Enter 按 Control+O，键入!跟脚本的名称，按 Enter

元素面板键盘快捷键

动作 Mac Windows / Linux
撤消更改 Command+Z Control+Z
重做更改 Command+ Shift+Z Control+Y
选择当前选定元素上方/下方的元素 Up Arrow/Down Arrow Up Arrow/Down Arrow
展开当前选定的节点。如果节点已展开，此快捷方式将选择其下方的元素 Right Arrow Right Arrow
折叠当前选中的节点。如果节点已经折叠，此快捷方式将选择其上方的元素 Left Arrow Left Arrow
展开或折叠当前选定的节点及其所有子节点 按住 Option 然后单击元素名称旁边的箭头图标 按住 Control+Alt 然后单击元素名称旁边的箭头图标
在当前选定的元素上切换编辑属性模式 Enter Enter
进入编辑属性模式后选择下一个/上一个属性 Tab/ Shift+Tab Tab/ Shift+Tab
隐藏当前选中的元素 H H
在当前选定的元素上切换编辑为 HTML 模式 Function+F2 F2
样式面板键盘快捷键
动作 Mac Windows / Linux
转到声明属性值的行 按住 Command 然后单击属性值 按住 Control 然后单击属性值
循环浏览颜色值的 RGBA、HSLA 和十六进制表示 按住 Shift 然后单击值旁边的颜色预览框 按住 Shift 然后单击值旁边的颜色预览框
选择下一个/上一个属性或值 单击属性名称或值，然后按 Tab/ Shift+Tab 单击属性名称或值，然后按 Tab/ Shift+Tab
将属性值增加/减少 0.1 单击一个值，然后按 Option+ Up Arrow/ Option+Down Arrow 单击一个值，然后按 Alt+ Up Arrow/ Alt+Down Arrow
将属性值递增/递减 1 单击一个值，然后按 Up Arrow/Down Arrow 单击一个值，然后按 Up Arrow/Down Arrow
将属性值增加/减少 10 单击一个值，然后按 Shift+ Up Arrow/ Shift+Down Arrow 单击一个值，然后按 Shift+ Up Arrow/ Shift+Down Arrow
将属性值增加/减少 100 单击一个值，然后按 Command+ Up Arrow/ Command+Down Arrow 单击一个值，然后按 Control+ Up Arrow/ Control+Down Arrow
循环显示角度值的度数 (deg)、弧度 (grad)、弧度 (rad) 和转角 (turn) 按住 Shift 然后单击值旁边的角度预览框 按住 Shift 然后单击值旁边的角度预览框
将角度值递增/递减 1 单击值旁边的角度预览 Up Arrow 框，然后按/Down Arrow 单击值旁边的角度预览 Up Arrow 框，然后按/Down Arrow
将角度值增加/减少 10 单击值旁边的角度预览 Shift 框，然后按+ Up Arrow/ Shift+Down Arrow 单击值旁边的角度预览 Shift 框，然后按+ Up Arrow/ Shift+Down Arrow
将角度值增加/减少 15 单击值旁边的角度预览框，单击/鼠标在角度时钟覆盖上滑动 单击值旁边的角度预览框，单击/鼠标在角度时钟覆盖上滑动

来源面板键盘快捷键

动作 Mac Windows / Linux
暂停脚本执行（如果当前正在运行）或恢复（如果当前暂停） F8 或 Command+\ F8 或 Control+\
跳过下一个函数调用 F10 或 Command+’ F10 或 Control+’
进入下一个函数调用 F11 或 Command+; F11 或 Control+;
跳出当前功能 Shift+F11 或 Command+ Shift+; Shift+F11 或 Control+ Shift+;
暂停时继续执行某行代码 按住 Command 然后单击代码行 按住 Control 然后单击代码行
选择当前所选框架下方/上方的调用框架 Control+ ./ Control+, Control+ ./ Control+,
保存对本地修改的更改 Command+S Control+S
保存所有更改 Command+ Option+S Control+ Alt+S
去线 Control+G Control+G
跳转到当前打开文件的行号 按 Command+O 打开命令菜单，键入:后跟行号，然后按 Enter 按 Control+O 打开命令菜单，在行号后面键入:，然后按 Enter
跳转到当前打开文件的某一列（例如第 5 行第 9 列） 按 Command+O，键入:行号:列号，按 Enter 按 Control+O，键入:行号:列号，按 Enter
转到函数声明（如果当前打开的文件是 HTML 或脚本）或规则集（如果当前打开的文件是样式表） 按 Command+ Shift+ O，输入声明/规则集的名称，或选择它 按 Control+ Shift+ O，输入声明/规则集的名称，或选择它
关闭活动选项卡 Option+W Alt+W
切换左侧的导航侧边栏 Command+ Shift+Y Control+ Shift+Y
切换右侧的调试器侧边栏 Command+ Shift+H Control+ Shift+H
代码编辑器键盘快捷键
动作 Mac Windows / Linux
删除最后一个单词中的所有字符，直到光标 Option+Delete Control+Delete
添加或删除代码行断点 将光标放在该行上，然后按 Command+B 将光标放在该行上，然后按 Control+B
转到匹配的括号 Control+M Control+M
切换单行注释。如果选择了多行，DevTools 会在每行的开头添加注释 Command+/ Control+/
选择/取消选择光标所在单词的下一次出现。每个事件同时突出显示 Command+ D/ Command+U Control+ D/ Control+U

网络面板键盘快捷键

动作 Mac Windows / Linux
开始/停止录制 Command+E Control+E
记录重新加载 Command+R Control+R
重放选定的 XHR 请求 R R
隐藏所选请求的详细信息 Escape Escape

性能面板键盘快捷键

动作 Mac Windows / Linux
开始/停止录制 Command+E Control+E
保存录制 Command+S Control+S
加载录制 Command+O Control+O

内存面板键盘快捷键

动作 Mac Windows / Linux
开始/停止录制 Command+E Control+E

控制台面板键盘快捷键

动作 Mac Windows / Linux
接受自动完成建议 Right Arrow 或者 Tab Right Arrow 或者 Tab
拒绝自动完成建议 Escape Escape
获取上一条语句 Up Arrow Up Arrow
获取下一条语句 Down Arrow Down Arrow
聚焦控制台 Control+` Control+`
清除控制台 Command+K 或 Option+L Control+L
强制输入多行。请注意，DevTools 应该默认检测多行场景，因此现在通常不需要此快捷方式 Shift+Return Shift+Enter
执行 Return Enter
展开已记录到控制台的对象的所有子属性 按住 Alt 然后点击展开 按住 Alt 然后点击展开

搜索选项卡键盘快捷键

动作 Mac Windows / Linux
展开/折叠所有搜索结果 Command+ Option+{或} Control+ Shift+{或}

开始使用

  • 查看和更改 DOM
  • 查看和更改页面样式
  • 调试 JavaScript
  • 在控制台产看消息并运行 JavaScript
  • 优化网站速度
  • 检查网络活动

发现 DevTools

在 DevTools 文档中，顶级选项卡称为面板。

设备模式

模拟移动设备。

  • 设备模式
  • 测试响应和特定于设备的视口
  • 模拟传感器：地理位置和加速度计

元素面板（Elements）

查看和更改 DOM 和 CSS

  • 开始查看和更改 DOM
  • 开始查看和更改 CSS
  • 检查和调整您的页面
  • 编辑样式
  • 编辑 DOM
  • 检查动画
  • 查找未使用的 CSS

控制台面板（Console）

从控制台查看消息并运行 JavaScript

  • 开始使用控制台
  • 使用控制台
  • 从命令行交互
  • 控制台 API 参考

来源面板（Sources）

调试 JavaScript，在页面重新加载时保留在 DevTools 中所做的更改，保存和运行 JavaScript 片段，以及将您在 DevTools 中所做的更改保存到磁盘。

  • 开始调试 JavaScript
  • 用断点暂停你的代码
  • 使用工作区将更改保存到磁盘
  • 从任何页面运行代码片段
  • JavaScript 调试参考
  • 使用本地覆盖在页面重新加载时保持更改
  • 查找未使用的 JavaScript

网络面板（Network）

查看和调试网络活动

  • 开始使用
  • 网络问题指南
  • 网络面板参考
  • 检查资源

性能面板（Performance）

寻找提高负载和运行时性能的方法

  • 优化网站速度
  • 开始分析运行时性能
  • 性能分析参考
  • 分析运行时性能
  • 诊断强制同步布局

内存面板（Memory）

  • 修复内存问题
  • JavaScript CPU 分析器

应用面板（Application）

检查所有加载的资源，包括 IndexedDB 或 Web SQL 数据库、本地和会话存储、cookie、应用程序缓存、图像、字体和样式表。

  • 调试渐进式 Web 应用程序
  • 检查和管理存储、数据库和缓存
  • 检查和删除 Cookie

安全面板（Security）

调试混合内容问题、证书问题等

  • 了解安全问题

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

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师
    1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
  • 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript
    1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
  • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
    数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
  • 分布式锁和spring事务管理 暴躁的鱼 锁及事务分布式springjava
    最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
  • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • 【前端】vue 报错:The template root requires exactly one element 程序员-张师傅 前端前端vue.jsjavascript
    【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
  • 从单体到微服务：FastAPI ‘挂载’子应用程序的转变 黑金IT fastapi微服务fastapi架构
    在现代Web应用开发中，模块化架构是一种常见的设计模式，它有助于将大型应用程序分解为更小、更易于管理的部分。FastAPI，作为一个高性能的PythonWeb框架，提供了强大的支持来实现这种模块化设计。通过“挂载”子应用程序，我们可以为不同的功能区域（如前端接口、管理员接口和用户中心）创建独立的应用程序，并将它们整合到一个主应用程序中。本文将详细介绍如何在FastAPI中使用“挂载”子应用程序的方
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • 前端three.js的Sprite模拟下雪动画效果 qq_35430208 three.js前端javascript三维场景中下雪效果threejs实现下雪效果
    一、效果如图所示：二、原理同下雨一样三、完整代码：index.jsimport*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';//模型对象//场景constscene=newTHREE.Scene();scene.add
  • 【Python爬虫】百度百科词条内容 PokiFighting 数据处理python爬虫开发语言
    词条内容我这里随便选取了一个链接，用的是FBI的词条importurllib.requestimporturllib.parsefromlxmlimportetreedefquery(url):headers={'user-agent':'Mozilla/5.0(WindowsNT6.1;Win64;x64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/80.
  • 系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机 rabbit_it qiankun学习前端框架前端阿里云
    一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性
  • ODOO不同版本与平台选择 chouchengyin2080 c#操作系统运维
    1.10.0vs11.0vs8.0截至2017年底，最新的ODOO发布版为ODOO11.0，但功能上有一定精简（去除财务模块，去除工作流支持），技术上变动较大（代码逐步迁移至Python3，前端框架改写得抽象）。所以如果是从生产使用的角度来讲，ODOO10.0是当前最好选择，因为其更稳定，第三方模块也更多更全面。而如果是ODOO技术爱好从业者，则逐步迁移至ODOO11.0也有必要，因为其底层技术架
  • windows下源码安装golang 616050468 golang安装golang环境windows
             系统： 64位win7， 开发环境：sublime text 2，  go版本： 1.4.1    1.  安装前准备(gcc, gdb, git)        golang在64位系
  • redis批量删除带空格的key bylijinnan redis
    redis批量删除的通常做法： redis-cli keys "blacklist*" | xargs redis-cli del 上面的命令在key的前后没有空格时是可以的，但有空格就不行了： $redis-cli keys "blacklist*" 1) "blacklist:12: [email protected]
  • oracle正则表达式的用法 0624chenhong oracle正则表达式
      方括号表达示 方括号表达式 描述 [[:alnum:]] 字母和数字混合的字符 [[:alpha:]] 字母字符 [[:cntrl:]] 控制字符 [[:digit:]] 数字字符 [[:graph:]] 图像字符 [[:lower:]] 小写字母字符 [[:print:]] 打印字符 [[:punct：]] 标点符号字符 [[:space:]]
  • 2048源码(核心算法有，缺少几个anctionbar，以后补上) 不懂事的小屁孩 2048
    2048游戏基本上有四部分组成， 1：主activity，包含游戏块的16个方格，上面统计分数的模块 2：底下的gridview，监听上下左右的滑动，进行事件处理， 3：每一个卡片，里面的内容很简单，只有一个text，记录显示的数字 4：Actionbar，是游戏用重新开始，设置等功能(这个在底下可以下载的代码里面还没有实现) 写代码的流程 1：设计游戏的布局，基本是两块，上面是分
  • jquery内部链式调用机理 换个号韩国红果果 JavaScriptjquery
    只需要在调用该对象合适(比如下列的setStyles)的方法后让该方法返回该对象（通过this  因为一旦一个函数称为一个对象方法的话那么在这个方法内部this（结合下面的setStyles）指向这个对象） function create(type){ var element=document.createElement(type); //this=element;
  • 你订酒店时的每一次点击 背后都是NoSQL和云计算 蓝儿唯美 NoSQL
    全球最大的在线旅游公司Expedia旗下的酒店预订公司，它运营着89个网站，跨越68个国家，三年前开始实验公有云，以求让客户在预订网站上查询假期酒店时得到更快的信息获取体验。 云端本身是用于驱动网站的部分小功能的，如搜索框的自动推荐功能，还能保证处理Hotels.com服务的季节性需求高峰整体储能。 Hotels.com的首席技术官Thierry Bedos上个月在伦敦参加“2015 Clou
  • java笔记1 a-john java
    1，面向对象程序设计（Object-oriented Propramming，OOP）：java就是一种面向对象程序设计。 2，对象：我们将问题空间中的元素及其在解空间中的表示称为“对象”。简单来说，对象是某个类型的实例。比如狗是一个类型，哈士奇可以是狗的一个实例，也就是对象。 3，面向对象程序设计方式的特性：     3.1 万物皆为对象。    
  • C语言 sizeof和strlen之间的那些事 C/C++软件开发求职面试题 必备考点（一） aijuans C/C++求职面试必备考点
            找工作在即，以后决定每天至少写一个知识点，主要是记录，逼迫自己动手、总结加深印象。当然如果能有一言半语让他人收益，后学幸运之至也。如有错误，还希望大家帮忙指出来。感激不尽。        后学保证每个写出来的结果都是自己在电脑上亲自跑过的，咱人笨，以前学的也半吊子。很多时候只能靠运行出来的结果再反过来
  • 程序员写代码时就不要管需求了吗？ asia007 程序员不能一味跟需求走
          编程也有2年了，刚开始不懂的什么都跟需求走，需求是怎样就用代码实现就行，也不管这个需求是否合理，是否为较好的用户体验。当然刚开始编程都会这样，但是如果有了2年以上的工作经验的程序员只知道一味写代码，而不在写的过程中思考一下这个需求是否合理，那么，我想这个程序员就只能一辈写敲敲代码了。       我的技术不是很好，但是就不代
  • Activity的四种启动模式 百合不是茶 android栈模式启动Activity的标准模式启动栈顶模式启动单例模式启动
    android界面的操作就是很多个activity之间的切换,启动模式决定启动的activity的生命周期 ;   启动模式xml中配置     <activity android:name=".MainActivity" android:launchMode="standard&quo
  • Spring中@Autowired标签与@Resource标签的区别 bijian1013 javaspring@Resource@Autowired@Qualifier
    Spring不但支持自己定义的@Autowired注解，还支持由JSR-250规范定义的几个注解，如：@Resource、 @PostConstruct及@PreDestroy。   1. @Autowired    @Autowired是Spring 提供的，需导入    Package:org.springframewo
  • Changes Between SOAP 1.1 and SOAP 1.2 sunjing ChangesEnableSOAP 1.1SOAP 1.2
    JAX-WS SOAP Version 1.2 Part 0: Primer (Second Edition) SOAP Version 1.2 Part 1: Messaging Framework (Second Edition) SOAP Version 1.2 Part 2: Adjuncts (Second Edition)   Which style of WSDL
  • 【Hadoop二】Hadoop常用命令 bit1129 hadoop
    以Hadoop运行Hadoop自带的wordcount为例，   hadoop脚本位于/home/hadoop/hadoop-2.5.2/bin/hadoop，需要说明的是，这些命令的使用必须在Hadoop已经运行的情况下才能执行   Hadoop HDFS相关命令  hadoop fs -ls  列出HDFS文件系统的第一级文件和第一级
  • java异常处理（初级） 白糖_ javaDAOspring虚拟机Ajax
    从学习到现在从事java开发一年多了，个人觉得对java只了解皮毛，很多东西都是用到再去慢慢学习，编程真的是一项艺术，要完成一段好的代码，需要懂得很多。 最近项目经理让我负责一个组件开发，框架都由自己搭建，最让我头疼的是异常处理，我看了一些网上的源码，发现他们对异常的处理不是很重视，研究了很久都没有找到很好的解决方案。后来有幸看到一个200W美元的项目部分源码，通过他们对异常处理的解决方案，我终
  • 记录整理-工作问题 braveCS 工作
    1）那位同学还是CSV文件默认Excel打开看不到全部结果。以为是没写进去。同学甲说文件应该不分大小。后来log一下原来是有写进去。只是Excel有行数限制。那位同学进步好快啊。 2）今天同学说写文件的时候提示jvm的内存溢出。我马上反应说那就改一下jvm的内存大小。同学说改用分批处理了。果然想问题还是有局限性。改jvm内存大小只能暂时地解决问题，以后要是写更大的文件还是得改内存。想问题要长远啊
  • org.apache.tools.zip实现文件的压缩和解压，支持中文 bylijinnan apache
    刚开始用java.util.Zip，发现不支持中文（网上有修改的方法，但比较麻烦） 后改用org.apache.tools.zip org.apache.tools.zip的使用网上有更简单的例子 下面的程序根据实际需求，实现了压缩指定目录下指定文件的方法 import java.io.BufferedReader; import java.io.BufferedWrit
  • 读书笔记-4 chengxuyuancsdn 读书笔记
    1、JSTL 核心标签库标签 2、避免SQL注入 3、字符串逆转方法 4、字符串比较compareTo 5、字符串替换replace 6、分拆字符串 1、JSTL 核心标签库标签共有13个， 学习资料：http://www.cnblogs.com/lihuiyy/archive/2012/02/24/2366806.html 功能上分为4类： (1)表达式控制标签：out
  • [物理与电子]半导体教材的一个小问题 comsci 问题
          各种模拟电子和数字电子教材中都有这个词汇-空穴       书中对这个词汇的解释是; 当电子脱离共价键的束缚成为自由电子之后,共价键中就留下一个空位,这个空位叫做空穴       我现在回过头翻大学时候的教材,觉得这个
  • Flashback Database --闪回数据库 daizj oracle闪回数据库
    Flashback 技术是以Undo segment中的内容为基础的， 因此受限于UNDO_RETENTON参数。要使用flashback 的特性，必须启用自动撤销管理表空间。 在Oracle 10g中， Flash back家族分为以下成员： Flashback Database， Flashback Drop，Flashback Query(分Flashback Query,Flashbac
  • 简单排序:插入排序 dieslrae 插入排序
    public void insertSort(int[] array){ int temp; for(int i=1;i<array.length;i++){ temp = array[i]; for(int k=i-1;k>=0;k--)
  • C语言学习六指针小示例、一维数组名含义，定义一个函数输出数组的内容 dcj3sjt126com c
    # include <stdio.h> int main(void) { int * p; //等价于 int *p 也等价于 int* p; int i = 5; char ch = 'A'; //p = 5; //error //p = &ch; //error //p = ch; //error p = &i; //
  • centos下php redis扩展的安装配置3种方法 dcj3sjt126com redis
    方法一 1.下载php redis扩展包  代码如下 复制代码 #wget http://redis.googlecode.com/files/redis-2.4.4.tar.gz 2 tar -zxvf 解压压缩包，cd /扩展包 （进入扩展包然后 运行phpize 一下是我环境中phpize的目录，/usr/local/php/bin/phpize (一定要
  • 线程池(Executors) shuizhaosi888 线程池
    在java类库中，任务执行的主要抽象不是Thread，而是Executor，将任务的提交过程和执行过程解耦 public interface Executor { void execute(Runnable command); }   public class RunMain implements Executor{ @Override pub
  • openstack 快速安装笔记 haoningabc openstack
    前提是要配置好yum源 版本icehouse，操作系统redhat6.5 最简化安装，不要cinder和swift 三个节点 172 control节点keystone glance horizon 173 compute节点nova 173 network节点neutron control /etc/sysctl.conf net.ipv4.ip_forward =
  • 从c面向对象的实现理解c++的对象（二） jimmee C++面向对象虚函数
    1. 类就可以看作一个struct，类的方法，可以理解为通过函数指针的方式实现的，类对象分配内存时，只分配成员变量的，函数指针并不需要分配额外的内存保存地址。 2. c++中类的构造函数，就是进行内存分配(malloc)，调用构造函数 3. c++中类的析构函数，就时回收内存(free) 4. c++是基于栈和全局数据分配内存的，如果是一个方法内创建的对象，就直接在栈上分配内存了。 专门在
  • 如何让那个一个div可以拖动 lingfeng520240 html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
  • 第10章 高级事件（中） onestopweb 事件
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • 计算两个经纬度之间的距离 roadrunners 计算纬度LBS经度距离
    要解决这个问题的时候，到网上查了很多方案，最后计算出来的都与百度计算出来的有出入。下面这个公式计算出来的距离和百度计算出来的距离是一致的。 /** * * @param longitudeA * 经度A点 * @param latitudeA * 纬度A点 * @param longitudeB *
  • 最具争议的10个Java话题 tomcat_oracle java
    1、Java8已经到来。什么！？ Java8 支持lambda。哇哦，RIP Scala！ 　　随着Java8 的发布，出现很多关于新发布的Java8是否有潜力干掉Scala的争论，最终的结论是远远没有那么简单。Java8可能已经在Scala的lambda的包围中突围，但Java并非是函数式编程王位的真正觊觎者。 　 　2、Java 9 即将到来 　　 Oracle早在8月份就发布
  • zoj 3826 Hierarchical Notation(模拟) 阿尔萨斯 rar
    题目链接：zoj 3826 Hierarchical Notation 题目大意：给定一些结构体，结构体有value值和key值，Q次询问，输出每个key值对应的value值。 解题思路：思路很简单，写个类词法的递归函数，每次将key值映射成一个hash值，用map映射每个key的value起始终止位置，预处理完了查询就很简单了。 这题是最后10分钟出的，因为没有考虑value为{}的情
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他