打印总结、选中dom元素跳转ide源码

docs/.vuepress/config/silder.js

@@ -12,6 +12,7 @@ export default [
       '/技术总结/踩坑总结/vite搭建react项目样式隔离方案',
       '/技术总结/踩坑总结/vue和react中的响应式区别',
       '/技术总结/踩坑总结/vue相关',
+      '/技术总结/踩坑总结/js打印的一些总结',
       '/技术总结/踩坑总结/url参数',
       '/技术总结/踩坑总结/脚手架中的baseurl作用',
       '/技术总结/踩坑总结/TS入门到进阶',
@@ -35,6 +36,7 @@ export default [
       '/技术总结/踩坑总结/web端扫码的几种方案',
       '/技术总结/踩坑总结/vite.config.js常用配置',
       '/技术总结/踩坑总结/vue.config.js常用配置',
+      '/技术总结/踩坑总结/选中dom元素跳转ide源码工具',
       '/技术总结/踩坑总结/不同打包工具环境变量配置方式对比',
       '/技术总结/踩坑总结/ESLint 和 oxlint',
       '/技术总结/踩坑总结/import和require自动导入总结',

docs/技术总结/踩坑总结/js打印的一些总结.md

@@ -0,0 +1,159 @@
+---
+title: js打印的一些总结
+lang: zh-CN
+feed:
+  enable: true
+description: js打印的一些总结
+---
+
+# js打印的一些总结
+
+> 本文作者：[onresize](https://github.com/onresize)
+
+### `1.基础信息打印`
+- console.log() 可以接受任何类型的参数，包括字符串、数字、布尔值、对象、数组、函数等。最厉害的是，它支持占位符!
+- 常用的占位符：
+
+`%s`：字符串<br />
+`%d or %i`：整数<br />
+`%f`：浮点数<br />
+`%o`：对象<br />
+`%c`：CSS样式<br />
+
+```js
+console.log('%c This is a styled message', 'color: red; font-size: 20px;');
+```
+
+- `效果如下：`
+<p align="left">
+  <img src="/AA_mdPics/log1.min.png" style="border-radius: 6px;"/>
+</p>
+
+```js
+// 美化打印实现方法
+const prettyLog = () => {
+  const isEmpty = (value) => {
+    return value == null || value === undefined || value === '';
+  };
+  const prettyPrint = (title, text, color) => {
+    console.log(
+      `%c ${title} %c ${text} %c`,
+      `background:${color};border:1px solid ${color}; padding: 1px; border-radius: 2px 0 0 2px; color: #fff;`,
+      `border:1px solid ${color}; padding: 1px; border-radius: 0 2px 2px 0; color: ${color};`,
+      'background:transparent'
+    );
+  };
+  // 基础信息打印
+  const info = (textOrTitle, content = '') => {
+    const title = isEmpty(content) ? 'Info' : textOrTitle;
+    const text = isEmpty(content) ? textOrTitle : content;
+    prettyPrint(title, text, '#909399');
+  };
+  return {
+    info
+  };
+};
+```
+
+```js
+// 创建打印对象
+const log = prettyLog();
+// 不带标题
+log.info('这是基础信息!');
+//带标题
+log.info('注意看', '这是个男人叫小帅!');
+```
+
+- `效果如下：`
+<p align="left">
+  <img src="/AA_mdPics/log2.min.png" style="border-radius: 6px;"/>
+</p>
+
+```js
+const error = (textOrTitle, content = '') => {
+    const title = isEmpty(content) ? 'Error' : textOrTitle;
+    const text = isEmpty(content) ? textOrTitle : content;
+    prettyPrint(title, text, '#F56C6C');
+};
+// 创建打印对象
+const log = prettyLog();
+log.error('奥德彪', '出来的时候穷 生活总是让我穷 所以现在还是穷。');
+log.error('前方的路看似很危险,实际一点也不安全。');
+```
+
+- `效果如下：`
+<p align="left">
+  <img src="/AA_mdPics/log3.min.png" style="border-radius: 6px;"/>
+</p>
+
+
+### `2.图片打印`
+```js
+  const picture = (url, scale = 1) => {
+    const img = new Image()
+    img.crossOrigin = 'anonymous'
+    img.onload = () => {
+      const c = document.createElement('canvas')
+      const ctx = c.getContext('2d')
+      if (ctx) {
+        c.width = img.width
+        c.height = img.height
+        ctx.fillStyle = 'red'
+        ctx.fillRect(0, 0, c.width, c.height)
+        ctx.drawImage(img, 0, 0)
+        const dataUri = c.toDataURL('image/png')
+        console.log(
+          `%c sup?`,
+          `font-size: 1px;
+                padding: ${Math.floor((img.height * scale) / 2)}px ${Math.floor(
+            (img.width * scale) / 2
+          )}px;
+                background-image: url(${dataUri});
+                background-repeat: no-repeat;
+                background-size: ${img.width * scale}px ${img.height * scale}px;
+                color: transparent;
+                `
+        )
+      }
+    }
+    img.src = url
+  }
+
+  picture('https://onresize.github.io/web-blogs/image.webp')
+```
+
+- `效果如下：`
+<p align="left">
+  <img src="/AA_mdPics/log4.min.png" style="border-radius: 6px;"/>
+</p>
+
+### `3.美化的数组打印`
+```js
+const table = () => {
+    const data = [
+        { id: 1, name: 'Alice', age: 25 },
+        { id: 2, name: 'Bob', age: 30 },
+        { id: 3, name: 'Charlie', age: 35 }
+    ];
+    console.log(
+        '%c id%c name%c age',
+        'color: white; background-color: black; padding: 2px 10px;',
+        'color: white; background-color: black; padding: 2px 10px;',
+        'color: white; background-color: black; padding: 2px 10px;'
+    );
+    data.forEach((row) => {
+        console.log(
+            `%c ${row.id} %c ${row.name} %c ${row.age} `,
+            'color: black; background-color: lightgray; padding: 2px 10px;',
+            'color: black; background-color: lightgray; padding: 2px 10px;',
+            'color: black; background-color: lightgray; padding: 2px 10px;'
+        );
+    });
+};
+table()
+```
+
+- `效果如下：`
+<p align="left">
+  <img src="/AA_mdPics/log5.min.png" style="border-radius: 6px;"/>
+</p>

docs/技术总结/踩坑总结/选中dom元素跳转ide源码工具.md

@@ -0,0 +1,44 @@
+---
+title: 选中dom元素跳转ide源码工具
+lang: zh-CN
+feed:
+  enable: true
+description: 选中dom元素跳转ide源码工具
+---
+# 选中dom元素跳转IDE源码工具
+>
+> 本文作者：[onresize](https://github.com/onresize)
+>
+
+
+- ### [code-inspector](https://github.com/zh-lx/code-inspector) ![github star:](https://img.shields.io/github/stars/zh-lx/code-inspector?color=white&label=Stars&logo=github&style=social)
+- webpack项目中常用、不限于webpack项目 [中文文档](https://inspector.fe-dev.cn/)
+- 使用方法：
+<p align="center">
+  <img src="/AA_mdPics/code-inspector.min.png" style="border-radius: 6px;" />
+</p>
+
+- `vue.config.js`
+```js
+const { codeInspectorPlugin } = require("code-inspector-plugin");
+
+configureWebpack: {
+  plugins: [
+		codeInspectorPlugin({
+			bundler: "webpack",
+		}),
+	],
+}
+```
+
+- ### [devtools-next](https://github.com/vuejs/devtools-next) ![github star:](https://img.shields.io/github/stars/vuejs/devtools-next?color=white&label=Stars&logo=github&style=social)
+- 针对vue3_vite项目中使用 [官方文档](https://devtools-next.vuejs.org/guide/vite-plugin)
+
+- `vite.config.js`
+```js
+import VueDevTools from "vite-plugin-vue-devtools";
+
+ plugins: [
+    VueDevTools(),
+ ]
+```