墨一鉴
墨一鉴

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)

  • 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做一
  • 摄影小白，怎么才能拍出高大上产品图片？ 是波妞唉
    很多人以为文案只要会码字，会排版就OK了！说实话，没接触到这一行的时候，我的想法更简单，以为只要会写字就行！可是真做了文案才发现，码字只是入门级的基本功。一篇文章离不开排版、配图，说起来很简单！从头做到尾你就会发现，写文章用两个小时，找合适的配图居然要花掉半天的时间，甚至更久！图片能找到合适的就不怕，还有找不到的，比如产品图，只能亲自拍。拿着摆弄了半天，就是拍不出想要的效果，光线不好、搭出来丑破天
  • 博客网站制作教程 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项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 骗子的基本套路 山水本原
    骗子的基本特点：1.善于观察，通过各种途径迅速了解到你的爱好、渴望和欲望。2.根据你的爱好，渴望或欲望，给你展示得到满足的一条途径。3.走上这条途径，你必须付出代价。4.付出代价后，你不会获得渴望、爱好或欲望的满足。5.骗子的出发点从来就不是如何满足你的爱好，渴望或欲望，而是为了满足他自己的。5是骗子的本质，4是你得到的结果，3是骗子的目标，2是骗子的方法，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.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • ‌汽车一键式启动系统‌包含哪些功能 zsmydz888 汽车一键式启动系统‌汽车无钥匙启动系统汽车
    ‌汽车一键式启动系统‌是一种智能化的汽车启动系统，它通过一个按钮来启动和熄灭发动机，取代了传统的钥匙启动方式。这个系统不仅简化了启动和熄火的步骤，还提供了多种智能化的功能，如自动开锁、自动关锁、自动关窗、自动防盗等。此外，汽车一键式启动系统还支持远程启动和紧急熄火功能，以及个性化设置记忆功能，大大提升了驾驶的便利性和安全性。‌移动管家汽车无钥匙进入一键启动基本功能‌：‌一键启动与熄火‌：通过轻按按
  • 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要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
  • 演说：孩子嘴巴笨不会说话，如何提升自己的口才？#吴守立冬令营 吴守立国学智慧
    关键词：少年领袖演说班国学吴守立国学天第书院论语吴守立在现代社会，口才已是一个人综合素质和综合能力的具体体现，二十一世纪是“表达世纪”，要想在这个“表达世纪”里成人成才，“会说”“会写”必不可少，随着新课改、升学对孩子表达能力提出更高的要求，口才将是我们每个人必修课和基本功。然而，孩子嘴巴笨不会说话，如何提升自己的口才？天第书院为大家介绍以下几种方法。1、父母做孩子最佳的倾听者和沟通者在孩子天性中
  • 财富自由之路读书笔记2 Elaine_a963
    继续财富自由读书笔记，今天就第十-二十三章进行归纳总结思考。这本书可以说是边学边练的武功秘籍。秘籍一：注意力。先从认知上刷新，先前谈到价值的重要性及单位价值提升的必要性。这里就引出了：“注意力”是在任何地方“挖掘”价值的最基本工具。那么，要自如运用注意力，就得练习。这里李老师给的无他，就是基本功训练扎实-坐享。秘籍二：活在未来。再一次颠覆认知，大众的思维是活在当下，而这里指引我们要活在未来。用正确
  • 从单体到微服务：FastAPI ‘挂载’子应用程序的转变 黑金IT fastapi微服务fastapi架构
    在现代Web应用开发中，模块化架构是一种常见的设计模式，它有助于将大型应用程序分解为更小、更易于管理的部分。FastAPI，作为一个高性能的PythonWeb框架，提供了强大的支持来实现这种模块化设计。通过“挂载”子应用程序，我们可以为不同的功能区域（如前端接口、管理员接口和用户中心）创建独立的应用程序，并将它们整合到一个主应用程序中。本文将详细介绍如何在FastAPI中使用“挂载”子应用程序的方
  • 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其他