1.《R语言实战》学习笔记---Chapter1.4 R包的源码安装、载入和使用
2.DevTool开发者工具
3.超详细的源码飞机大战小程序源码讲解（1）
4.手抓手带你使用vue devtools
5.你可能不知道的ChromeDevtools实用功能
6.一小时实践入门 Vue Devtools（二）

《R语言实战》学习笔记---Chapter1.4 R包的安装、载入和使用

       包在R语言中是源码用于组织和管理代码的集合。它们提供了实现特定任务的源码函数和数据集。包的源码安装是使用install.packages()函数完成的，其中无参数调用将显示CRAN镜像站点列表，源码正数源码而指定包名作为参数则可下载并安装特定的源码包，如"pkgname"，源码只需安装一次。源码已安装的源码包可通过update.packages()更新，而installed.packages()用于查看已安装的源码包信息。使用library(pkgname)或require(pkgname)语句来加载已安装的源码包。

       对于需要进行生物信息学分析的源码用户，Bioconductor仓库提供了大量相关包，源码可通过搜索在该网站上直接获取。源码要访问这个仓库，首先需要安装BiocManager包，通过install.packages("BiocManager")实现。然后，可以使用BiocManager::install("org.Hs.eg.db")命令安装特定的包，用于生物信息学中的ID转换等任务。查看包的帮助文档通常使用BiocManager库中的命令，例如vignette("DESeq2")。

       对于在GitHub站点上发布的包，R提供了一个名为devtools的包，可通过install.packages("devtools")进行安装。安装过程中可能需要解决依赖问题，这可能包括安装Rtools，用于编译某些源码包。完成devtools的安装后，就可以使用它来安装GitHub上的包，例如velocyto.R，用于RNA速率分析。实现包的下载和安装涉及多个步骤，可能需要多次尝试才能成功。

DevTool开发者工具

       DevTools，整数源码表示这个前端开发的得力助手，犹如一把多功能瑞士军刀，为开发者揭示网页的秘密。它分为九个强大的组件，每个都扮演着不可或缺的角色：

Device Mode（设备模式）: 通过快捷键Ctrl+Shift+I（Windows）或Cmd+Opt+I（Mac）一键启动，设备模式允许你模拟真实设备的响应式设计，调整网络环境，甚至模拟地理位置，以便更好地测试用户体验。

Elements（元素面板）: 作为DOM和样式调试的窗口，元素面板让你实时查看和修改网页结构，设置断点，轻松诊断和优化网页表现。

Console（控制台）: 控制台是你的现场指挥中心，无论是调试代码、查看消息，还是执行脚本，这里都是你发现问题和解决问题的前线阵地。

       接下来，让我们深入探讨DevTools的其他功能：

Source Code Panel（源代码面板）: 设置断点，直接在浏览器内查看和操作代码，方便进行代码级的调试。

Network（网络面板）: 网络面板实时监控网络请求，详细展示资源加载过程，提供了强大的缓存管理和网络环境模拟功能，让你洞察网络性能。

Performance（性能面板）: 通过控制选项选择CPU或网络模拟，Performance面板为你呈现帧率、CPU和网络资源使用情况，火焰图追踪DOM加载、首次绘制和load事件，细节展示每一笔性能开销。

Memory（内存面板）: 内存分析器如同性能的X射线，帮助你识别出内存消耗的瓶颈，优化内存使用。购买赚钱app源码

Application（应用面板）: 在这里，你可以查看和管理Local Storage、Session Storage以及cookies，对用户数据的存储和管理游刃有余。

Security（安全面板）: Security Overview确保你的页面安全，区分HTTP和HTTPS，左边的源详情栏让你对页面的加密状态了如指掌。

       DevTools的每一个部分都是为了提升开发效率，确保网页的性能和安全性。熟练掌握这些工具，你将能在前端开发的道路上如鱼得水，轻松应对各种挑战。

超详细的飞机大战小程序源码讲解（1）

       本次讲解主要以代码的形式，需要读者有一定的编码能力，内容总共分为六个章节，其他章节链接如下：

       （2）： 花儿：超详细的飞机大战小程序源码讲解（2）

       （3）： 花儿：超详细的飞机大战小程序源码讲解（3）

       （4）： 花儿：超详细的飞机大战小程序源码讲解（4）

       （5）： 花儿：超详细的飞机大战小程序源码讲解（5）

       （6）： 花儿：超详细的飞机大战小程序源码讲解（6）

       一、Javerscript基础

       1.1 export default

       1.2 let instance

       1.3 const

       1.4 箭头函数

       1.5 this 函数优先级

       二、飞机大战小程序源码获取

       微信开发者工具网址：/post/

8.事件监听器的断点

       有时应用会在用户发生交互时出现问题，这时我们就可以添加事件监听器添加断点来捕获这些事件以检查交互时的问题。可以在Source面板右侧的EventListenerBreakpoints中勾选相应的事件：

9.DOM操作的断点

       当页面的内容发生变化时，如果想要知道是哪些脚本影响了它，就可以给DOM设置断点。我们可以右键点击需要设置断点的DOM元素，在弹出的菜单中点击Breakon以选择合适的断点。

       可以看到，Breakon中有三个选项：

       SubtreeModifications：子节点（内容、属性）修改通知，常用在子节点内容发生变化后，来定位源码；

       AttributesModifications：当前节点的属性修改通知，常用在节点的className等属性被修改后，来定位源码了；

       NodeRemoval：当前节点移动时通知，常用在节点被移除时，定位源码。

.异步请求的断点

       XHRbreakpoints可以用于异步请求的断点，点击加号即可添加断点规则，藏头诗生成网站源码输入请求的URL地址（片段），会在请求地址包含对应字符串的异步请求发出的位置自动停止：

原文：/post/

一小时实践入门 Vue Devtools（二）

       组件树描述了Vue应用的层级结构，由根组件开始，通过添加子组件形成层次。

       组件是独立可复用的代码单元，封装HTML、CSS和JavaScript，用于拆分UI为模块化部分。

       组件的属性是从父组件传递给子组件的数据，用于数据传递。

       组件数据是组件的私有状态，通过一个函数返回对象，包含组件所需数据。

       计算属性基于组件的data或其它计算属性计算得出，缓存依赖变化后的值，性能优于方法。

       插槽允许在组件中插入自定义内容，增加组件的灵活性。

       事件是组件与外部交互的方式，通过emit方法触发，父组件监听事件。

       事件追踪在Vue Devtools中可查看事件流、触发顺序和数据传递。

       Vuex是一个集中式状态管理库，用于管理复杂应用状态，与Vue深度集成。

       性能数据包括组件渲染、更新次数等指标，用于定位和优化性能瓶颈。

       单页应用在单一页面加载所有代码，提供流畅用户体验，无页面跳转。

       状态管理提供数据和界面状态的组织方法，确保状态一致性和可预测性。

       Pinia是设置微信源码Vue3的轻量级状态管理库，简化状态管理，与Vue核心深度集成。

       生命周期钩子提供在组件不同阶段执行代码的机会，控制组件行为。

       @符号用于在npm中指定依赖版本或作用域。

       /符号用于分隔作用域和包名在npm中。

       Vuex是Vue.js的状态管理库，用于全局状态存储和管理。

       Vue Router是Vue的官方路由库，用于管理单页应用的导航。

       Babel是一个JavaScript编译器，将新语法转换为兼容旧版浏览器。

       ESLint是一个JavaScript代码检查工具，用于识别和报告错误，支持高度自定义。

       Invoking意为调用，用于在编程中执行函数或方法。

       Vue中的generators可能指生成器函数，但Vue本身不直接支持生成器。

       completion hooks可能是指Vue的生命周期钩子，但具体含义需根据上下文确定。

       npm run命令执行package.json中定义的脚本，用于执行开发任务。

       npm run serve用于启动Vue CLI项目的开发服务器，实时重载源代码修改。

       Vue模板不是插件，而是用于描述DOM结构的语法。

       @符号在Vue中用于监听DOM事件，如@click="handler"。

       @submit指令用于监听表单提交事件，触发方法处理。

       @submit.prevent指令阻止默认的表单提交行为，用于AJAX提交处理。

       v-model指令创建表单控件与数据之间的双向绑定，保持同步。

       type属性用于指定输入类型，如在<input>元素中。

       export用于导出模块中的函数、对象或值，供其他模块使用。

       export default用于导出模块的默认导出，用于组件导出。

       data选项函数返回组件状态，对象包含所有数据属性。

       return用于返回data选项函数的结果，定义组件状态。

       $emit方法触发自定义事件，子组件到父组件的事件传递。

       this.newBook访问组件实例的新Book数据属性。

       v-model指令使输入框与newBook属性双向绑定。

       v-for指令用于渲染列表，迭代数组或对象生成元素。

       双引号在Vue模板中用于包围指令参数或表达式。

       冒号用于动态绑定属性值，如绑定src属性。

       Vue Devtools中的Timeline面板用于监控应用活动，分析性能。

       开发者工具的性能面板分析网页性能，包括JavaScript执行、渲染等。

       JavaScript执行事件表示JavaScript代码处理过程。

       渲染事件表示浏览器绘制或更新页面内容。

       布局事件计算页面几何结构，如元素大小和位置。

       Frames表示浏览器渲染页面的频率，目标是帧/秒。

       Loading事件表示浏览器从服务器加载资源。

       Scripting事件表示解析或执行JavaScript代码。

       Rendering事件涉及HTML、CSS和JavaScript转换为可显示页面。

       Painting事件表示将渲染树转化为屏幕像素。

       PascalCase是一种命名约定，单词首字母大写。

       kebab-case是一种命名约定，单词用短划线分隔，用于HTML和CSS。

手机扒站

       在移动设备上探索网站背后的秘密，本文将带你领略手机扒站的便捷与乐趣。

       许多开发者都利用浏览器的开发者工具进行网站分析，电脑上的操作与手机略有不同。无需借助专门的终端教程，只需借助kiwi Browser这款实用浏览器，你就能轻松实现手机扒站。

       步骤一：下载并启动扒站工具

       首先，从应用商店下载kiwi Browser，打开它，输入你感兴趣的网站链接，开始你的探索之旅。

       步骤二：开启开发者工具

       进入网站后，滑动屏幕，找到右上角的三个点，打开开发者工具。接着，点击搜索栏旁边的方框，找到以"DevTools"开头的选项，点击进入这个隐藏的世界。

       扒取页面源码

       扒取PHP或HTML页面源码需要逐个页面操作。找到你关注的"index"页面，点击进入，源码便会显现，此时只需复制你所需的部分。

       对于JavaScript和CSS，扒取方法与HTML类似，同样需要逐个文件查看。

       注意：代码复制与保存

       由于手机限制，无法直接下载，你需要在文件管理器中新建一个空白的PHP或HTML文件，将代码粘贴进去进行保存。

       扒取

       对于，定位就更为直观了。在开发者工具的绿色框中，找到的储存路径，通常格式为.png或.jpg。长按你想要下载的，选择**框中的选项，即可顺利下载。

       总的来说，手机扒站虽然稍有挑战，但掌握这些技巧后，你将能深入理解并灵活运用到各种场景中。让我们一起探索这个充满奥秘的世界吧！

Chrome 开发者工具 workspace 的概念

       使用工作区功能在Chrome开发者工具中对文件进行编辑与保存。

       工作区允许开发者将DevTools中的修改同步至本地计算机上的源代码文件。例如，假设你有一份网站源代码在桌面上，同时运行本地Web服务器，通过localhost:访问该网站，并使用DevTools调整CSS。启用工作区后，DevTools中的任何CSS更改将保存至桌面源代码。

       然而，工作区在现代框架的源代码转换过程中存在局限性。框架可能会优化源代码，使其更快运行，但工作区通常能通过源映射功能映射优化后的代码至原始源代码。不过，不同框架对源映射支持的差异导致工作区无法支持所有变化。例如，工作区不支持Create React App。

       本地覆盖是另一个与工作区类似的功能。当您希望在页面上试验更改且不关心这些更改如何映射至页面源代码时，使用本地覆盖功能。当前加载到Chrome开发者工具的网页文件夹颜色发生变化时，使用此功能。

       直接在Chrome开发者工具中修改index.html文件，并添加Jerry的字符串。刷新页面后，修改会被持久化。

       在Elements标签页直接修改DOM不会持久化至HTML文件。原因在于，Elements面板显示的节点树反映页面的DOM，而浏览器通过网络获取HTML，解析HTML，生成DOM节点树。页面的最终状态可能与原始HTML显著不同，受到HTML、JavaScript和CSS的影响。因此，DevTools难以确定应保存更改的位置。

       在Sources标签页修改HTML和JavaScript文件可以实现持久化。更多Jerry的原创文章，可访问："汪子熙"。

微信小程序反编译

       微信小程序反编译及抓包流程详解

       反编译微信小程序的主要工具是wxappUnpacker，以下为具体步骤：

       一、环境及工具准备

       Node.js：访问 /download/ 下载并安装。

       wxappUnpacker：从 /xuedingmiaojun/wxappUnpacker 获取，注意安装。

       微信开发者工具：访问 /miniprogram/dev/devtools/download.html 下载，直接安装。

       二、小程序包提取

       使用模拟器或安卓手机，确保手机已root，安装文件管理器如re文件管理器或MT管理器。

       在模拟器或手机中使用adb或夜神模拟器的nox_adb进行以下操作：

       执行`adb shell ls -l /data/data/com.tencent.mm/MicroMsg/`查看目录。

       在用户目录下查找exapkg包，执行`adb shell ls /data/data/com.tencent.mm/MicroMsg/db3beb9ebe0b5edab8d1/appbrand/pkg/`。

       删除小程序目录下所有文件，执行`adb shell rm -f /data/data/com.tencent.mm/MicroMsg/db3beb9ebe0b5edab8d1/appbrand/pkg/*`。

       三、使用微信开发者工具

       将提取的包发送到PC端，使用`adb pull`命令将整个pkg目录发送到PC的指定目录。

       四、配置wxappUnpacker

       安装wxappUnpacker依赖：`npm install`。

       五、运行wxappUnpacker

       执行`node wuWxapkg.js D:\tmp\tmp\pkg\_-_.wxapkg`。

       反编译后的文件将生成同名的文件夹，包含反编译的js文件。

       六、使用微信开发者工具打开源码

       点击“使用测试号创建”，即可查看反编译后的源码。

       抓包流程

       使用Proxifier或Charles抓包，具体步骤如下：

       对于Proxifier：

       安装Proxifier，添加代理指向burp/fuddler监听的端口。

       设置代理规则匹配微信小程序相关进程。

       对于Charles：

       下载并激活Charles代理软件。

       在Windows选项卡中设置默认不开启window代理，配置代理规则匹配所有流量，通过代理转发。

       最后提示：

       - 使用微信开发者工具和反编译工具进行微信小程序开发和研究。

       - 使用安全工具如Proxifier或Charles抓包，确保遵守法律和伦理规范。

       - 本教程仅用于学习和研究，避免非法用途。