一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

微软Edge开发者工具不仅是调试和优化的平台，更是学习和实验的沙盒。随着Web技术的不断发展，其功能也在不断进化。鼓励大家积极尝试新特性，分享使用心得，共同推进前端开发的边界。无论是通过社区论坛、官方文档，还是参与开源项目，持续学习与交流是成为顶尖前端专家的不二法门。在探索Edge DevTools的旅途中，让我们携手前行，不断追求卓越的Web开发实践。讨论点：在你的实际工作中，Edge开发者工具哪些功能最让你惊喜？你有哪些独到的使用技巧愿意与大家分享？

vConsole作为一款前端调试神器，为前端开发者提供了一个便捷的调试解决方案。通过本文的介绍和示例，相信你已经对vConsole有了更深入的了解。然而，vConsole的功能远不止于此，它还有许多高级用法和技巧等待你去发掘。讨论：你在前端开发中是如何使用vConsole的？你有没有发现vConsole的一些隐藏功能或技巧？欢迎在评论区分享你的经验和见解！💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！

引用阿里图标库的方式有三种，前两种都只能引入单色的图标，对于强迫症简直了，所以俺参考其他大佬的博客，学习了如何通过symbol引用彩色的图标第一步：在阿里图标库选择好自己要的图标，加入购物车，添加至项目，下载到本地这样就把样式文件下载到本地了第二步：在vue项目里面创建对应的inconfont文件夹将这些下载的样式文件放到新建的文件里，方便项目中引用第三步：在main.js中，引入这几个文件（前两个是阿里图标文件，最后一个可以不要，只是自己设置的基础图标宽高等），目的是为了让全...

关于如何引入彩色的阿里图标，请参考另一篇博客：vue引用阿里彩色图标（symbol引用）_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120322471接下来要封装出自己的icon组件，方便使用。第一步：在components文件中新建一个组件（我的叫cjIcon.vue）<template> <!-- symbol方式引用彩色图标，就得这么写 --> <!-- :clas

Markdown是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。它使用简单的符号和语法来表示标题、列表、链接、图片等元素，使得文档的格式和内容能够清晰地分离。

ES6语法中，声明变量时不再只能一个一个来赋值了，可以批量赋值了哦。

在CSS中，变量是一个非常实用的工具，它们能够帮助我们更有效地管理和重复使用各种样式。这些变量（也被称为CSS自定义属性）使我们能够为特定的值赋予一个名字，然后在样式表中的任何地方重复使用这个名字。CSS变量以两个破折号-- 开始，这让我们可以轻松地将它们与常规属性区分开来。这篇文章会带你了解如何定义和使用CSS-Var变量，以及它们在编写样式时的优势。css变量是通过--*语法定义的，其中表示我们为变量定义的名称。例如，我们可以定义一个名为的变量，并为其设置一个颜色值：css代码在上面的代码中，

Vue 读作 /vju:/ 不要读成v u eVuex 的x读作叉 不要读成埃克斯博主DTcode7带您 溺亖在知识的海洋里，嘿嘿嘿.~🐒 个人主页——DTcode7 的博客🐒《微信小程序相关博客》《Vue相关博客》《前端开发习惯与小技巧相关博客》《AIGC相关博客》《photoshop相关博客》😚 吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤 🙈🕍 愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！

对于开发者来说，熟悉多种运行方式将有助于在不同的开发环境中灵活工作。请注意，确保在运行之前，您的计算机上已经正确安装了Node.js，并且您具有足够的权限来访问和执行该文件。当然，在VSCode中，您也可以通过内置的终端来运行Node.js文件。文件中的代码，并在终端中显示输出结果。可以运行，但是其它的命令无法运行。，并在其中编写您的代码逻辑。Node.js将执行。

git控制台，提交代码到远程仓库

git提交代码到远程仓库的一些规范操作和技巧介绍

直接用git pull origin 远程分支名 不写本地分支名字，这样来拉取（将远程分支拉到当前本地分支），有可能就ok了。如果提示有冲突，就可以按照上述：【特殊提示界面】-【git mergetool可视化工具】来处理。当本地分支和远程分支代码版本号差异过大，会提示无法快速合并，那就不要指定分支拉取，git checkout -b 新分支名 在本地创建一个新的分支。创建一个新本地分支并且直接切换到这个分支（快捷操作）推送到当前所在分支的云端对应分支去。

（vim编辑器是Linux系统中必备的编辑器，Git工具由Linux创始人写出来的，所有就把vim编辑器也用在Git上）提示你说要填写提交备注，你没有写备注，要你给个说法。根据需求合并完冲突代码之后，命令行界面中的分支名后面会有个（mergeing）标识，表示正在合并中，如果没有commit提交，我们也可以输入 git merge --continue 继续合并冲突操作。当commit（提交）比较多，git log 的内容在一页显示不完整，满屏放不下的时候，就会显示冒号。

Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。简而言之，koa可以让前端自己搭建一个服务器模拟后端接口，返回数据进行调试。KOA官网。

公众号openId是用户在当前公众号下的唯一标识（‘身份证’），就是说通过这个openId，就能区分在这个公众号下具体是哪个用户。1.2) 通过授权code获取用户信息（用户信息包含两种：1）只取OpenId，2）取用户相关头像、昵称。获取微信公众号用户的OpenId（用户关注公众号后，用户在公众号的唯一凭证），有两种方法。1.1）获取网页授权code（分为静默授权，非静默授权（需用户确认））2.4）按下F12打开调试模式（或者鼠标右键-检查），选中某个用户。2）通过公众号网页后台用户。

XPath (XML Path Language) 是一门在 XML 文档中查找信息的语言，可用来在 XML 文档中对元素和属性进行遍历。XPath定位在爬虫和自动化测试中都比较常用，通过使用路径表达式来选取 XML 文档中的节点或者节点集，熟练掌握XPath可以极大提高提取数据的效率。因为XPath解析数据，是基于元素（Element）的树形结构，所以学习XPath前，先了解一下html的结构及常用标签。1.元素属性，快速定位，唯一属性： //*[@id="images"]

控制台中可以看到在选中dom元素之后，鼠标右键的菜单中，复制功能扩展开有以下几项：复制元素复制outerHTML复制selector复制JS路径复制样式复制XPath复制完整的XPath

excel表格中的日期格式显示错误：通过设置【单元格格式】，改编时间显示格式这样，就能正常显示日期了但是，会有个问题：日期中隐藏了时间段想要把时间给拆出来，就需要使用【分列】可以参考这篇博客：如何在excel去掉日期后边的时间-百度经验 (baidu.com)https://jingyan.baidu.com/article/d5a880eb5ad2a253f047cc35.html分列时，记得选择上【空格】分列，将日期和时间拆成两列，效果如下：这...

游览器为了节约资源，是会缓存页面的，但这也会带来一个问题，那就是因为缓存了页面，你再次打开页面它不会发送请求（游览器觉得页面没有变化），导致你页面是打开了，但是你的登录状态出现了问题（因为没有发送登录请求，你的登录状态没有更新），也就是为什么fidders抓包，会显示sessionOut=true =====> 登录状态过期/未登录网上有很多处理页面缓存的方法，比如：1.打包的时候把html打包成jsp，然后添加一些东西（我没试过，俺也想学一下）2.在meta里添加一些东西...

更换开发设备后，新安装的vscode软件，是没有原先的配置的，诸如快捷键，快捷代码段生成、安装的各个插件，插件的配置等都木大了，开发起来会很别扭，网上最多的就是去安装一个叫做Settings Sync的插件，关联你的配置文件到github上，但是，github用起来间歇性掉线，持续性无法访问，还是用国内的gitee（码云）比较安心所以，接下来，针对插件：code settings sync，介绍如何将vscode插件、配置信息全部同步到gitee上，即使更换设备后，也能快速拉去同步常用配置.

此博客作为个人vscode插件的配置文件留底，同时也对其中一些插件的配置进行说明，方便更改效果详细的插件名称与效果图可参考这篇博客：vscode插件使用留底_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120058093完整的配置setting.json文件放在文末，有需要自取~部分插件配置介绍Better Comments...

组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/loading#optionselementUI的loading官网文档，这里我着重使用Loading.service(options);方法具体使用方法：第一步：引入loading// ?引入elementUI的loading效果，用于防止图片处理过慢，用户乱点import { Loading } from 'element-ui'第二步：在需要loading的地方调用

目录一：需要使用到的两个快捷键ctrl+alt+ 方向键 ==>多行选择ctrl+alt+d ==>将下一个查找匹配项添加到选择二：操作演示当遇到很多行不规则数据需要批量处理的时候，一行一行的复制粘贴很麻烦，因此，需要使用链式操作来快速完成。一：需要使用到的两个快捷键ctrl+alt+ 方向键 ==>多行选择ctrl+alt+d ==>将下一个查找匹配项添加到选择注意，我有修改过vscode的快捷，所以跟你默认的会不太一样，我把...

程序开发过程中，团队协作是常态，有人负责前端，有人负责后端，那么前后端交互时的接口文档，就是一个相当关键的【沟通桥梁】，接口文档最常见（仅限于我这种弱智小白的见识范围）的就是markdown文档（.md文件），接下来记录一下我自己用Typora工具制作markDown接口文档的习惯与技巧markDown基础常用快捷键1.段落标题H1~H6 ctrl+数字1~数字6注意：这里不知道为什么，输入的数字不能用小键盘，否则没有效果2.高亮文字 ==文字==要先到【偏好设置】...

推荐技术胖的公众号推文：都是常用的，我截取了对我来说更常用的并做详细说明动图演示23个鲜为人知的VSCode快捷键https://mp.weixin.qq.com/s/J9HfKoBVryMtjvHQUrqugQ这里我就不去自己录制gif了，直接用【技术胖】的了，懒狗，请见谅目录快捷键操作ctrl+p 搜索文件，并跳转到该页面ctrl+g 输入行号进【行定位】alt+z 开启超过一行长度，自动换行功能F8 定位错误、警告shift+alt+i 在所选的每一行的末...

微信小程序-封装请求API——promise方式_五速无头怪的博客-CSDN博客。小程序如何实现AOP · 语雀 (yuque.com)参考格式：colorUI的社区讨论。

已经有一篇博客介绍这三者的转换了，游览量挺大，可以先去看看base64和file互转_Amy的博客-CSDN博客_base64转file以图片文件为例：应用场景工作中经常遇到需要把图片文件操作之后再上传到服务器（比如，拼接、裁剪、生成预览等），通常操作之后的图片都会变成一个 base64 的字符串，把这个字符串嵌入到 img 标签的 src 属性中就能看到图片了。正常来说也是可以把这个字符串传给服务器存储的，但是图片生成base64字符串后特别特别的长，这样存取的话非常慢。所以我们需要把它转回成文件对象

封装函数是一种编程技巧，它允许开发者将一段特定的代码逻辑打包成一个独立的单元，以便在程序的其他地方重复使用。这样做的好处是可以减少代码冗余，提高代码的可读性和可维护性。以下是如何优雅地封装wx.requestrequestwx.requestresolverejectwx.login封装函数是提高开发效率和代码质量的有效手段。通过合理设计和使用封装函数，可以大大提升开发的效率和程序的稳定性。

实际上，cmd文件和bat文件是一样的.bat尾缀特指.bat文件，是DOS和Windows中的批处理文件。（在Windows中与.cmd文件等同，都是由cmd.exe解释执行的cmd文件是Windows中的一个应用程序cmd.exe例如：批量获取文件名称方法一：bat文件DIR *.* /B> 目录.TXT双击执行：方法二：cmd文件上面说了，cmd文件和bat文件本质上一样，所以完全可以用cmd执行这段代码...

this.$store.commit('方法名','载荷')Vuex，一个专为 Vue.js 应用程序开发的状态管理模式，用来处理在 vue 各个组件之间传值的痛苦。比如：在父子、兄弟组件，传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得及其蛋疼。而 vuex 就很好的解决了这种问题。 关于如何安装vuex，这里不做赘述，请参考官方文档State | Vuex (vuejs.org)https://vuex.vuejs.org/zh/guid...

微信小程序中，有很做组件都是有默认宽高的，比如，image组件默认宽度320px、⾼度240px，这些默认设置常常会对我们的页面布局造成影响 <!-- mode="widthFix" 让图片占满宽度，等比例缩放高度 --> <image src="xxxx" mode="widthFix"></image>所以，在使用image标签的时候，最常用的方法就是设置其 mode，例如用widthFix，...

export暴露封装的方法、import引用封装的方法一般我们会创建一个文件夹，里面放封装的方法，简化代码（比如封装一下请求API、时间格式化函数等）微信小程序的请求API封装可以看下这篇博客：微信小程序-封装请求API_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120451986在最外层目录下创建一个utils文件夹，以util.js文件为例你可以直接声明一个函数，然后当场用export 把它暴露出.

微信小程序原生的请求API就是wx.requestwx.request({ url: 'example.php', //仅为示例，并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) }})有时候不能很好的适配我们的开发需求，比如我们要加一

目录首先，在写html、wxml时，带上样式类名然后，利用vscode插件【CSS Tree】，来快速生成对应的类名最后，对照着html格式，来写样式文件对于俺这种木得票子的打工仔，缺少扩展显示器等外设，写代码、切文档、改样式需要反复缩放界面，很烦~总结一些开发中的技巧，提升开发速度和开发舒适度首先，在写html、wxml时，带上样式类名就像这样，在构建html的时候就同时把样式类名写好，静态页面编写的时候，可以随便写一些填充内容来占位例如：想要下面这样的效果，就先搭建静