关注
分享
文章平均质量分 68
谷歌浏览器(通常简称为 Chrome )是由谷歌开发的网络浏览器。 它于 2008 年首次针对 Microsoft Windows 发布，后来移植到 Linux ，macOS ，iOS 和 Android 。 浏览器也是 Chrome OS 的主要组件，它可以作为 Web 应用的平台。
前端加油站
如果可以实现记得点赞分享，更多关注：
https://gitee.com/coding_zxd
http://www.zxdblog.net
谢谢老铁～
展开
-
vite下javascript-obfuscator 代码混淆
关于 rollup-plugin-obfuscator 插件的配置选项列表，每个选项都用于定制代码混淆和压缩的方式。在vite.config.ts中引入插件，并进行设置。1.高混淆，低性能。性能会比没有混淆的时候慢很多。2.中等混淆，最佳性能。性能会比没有混淆时慢。3.低混淆、高性能。表现会处于比较正常的水平。项目环境：Vue3+Vite。4.默认预设，高性能。原创 2023-11-24 16:54:09 · 2054 阅读 · 0 评论 -
Drawer 篇 - Drawer 常识
# 前言 说到 Drawer 大部分的朋友可能都很陌生，那 Drawer 是个什么东西？ Chrome DevTools 有很多部分，被分为9个 tab (俗称选项卡) ( Elements ， Console ， Sources ， Network ， 等等...) 但是，那仅仅是它的一部分而已！有一组平行的选项卡，被隐藏在主窗口之下。这个组合被称为 Drawer # 1. 如何打开 Drawe...原创 2019-09-25 11:42:43 · 2282 阅读 · 0 评论 -
console篇 - 自定义格式转换器
# 前言 大多数的情况下，我们习惯使用 DevTools 的 console 默认对 object 的转换，但有时候我们想用与众不同的方式来处理。 那我们就可以自定义输出对象的函数，它通常被称为 Custom Formatter 。 请注意: 在我们写一个之前，需要在 DevTools 进行设置 (在 DevTools 的 ⋮ 下拉框找到设置，或者按下 F1 ) 中把对应的设置打开: forma...原创 2019-09-25 23:07:43 · 266 阅读 · 0 评论 -
console篇 - 对象&方法
# 前言 在我们调试 Javascript 的代码时，对象 和 方法 作为经常被我们调试的对象，所以这里介绍关于 对象 和 方法 的调试技巧。 # 1. queryObjects (对象查询)方法 假如我们有这样一段代码，我们在里面定义了一些对象。 问一个问题，我们怎么知道，在 特定的时刻 + 特定的执行上下文 有哪些对象呢？ DevTools 里的 queryObjects 函数可以展示这些信...原创 2019-09-25 10:10:49 · 155 阅读 · 0 评论 -
元素面板篇 - 颜色选择器
# 前言 如果你从来没有仔细的查看过颜色选择器，很正常，因为它确实毫不起眼：只有一些可以让我们选择的颜色。但仔细查看你会发现：DevTools 的开发团队在这个小玩意里面放了多到你想象不到信息。 # 1. 只选择你正在用的颜色 介绍颜色选择器的一部分： 切换到一个有色调变化的 Material 调色板 自定义，可以添加和删除颜色 从 CSS Variables 中选择一个你当前页面使用的样式表...原创 2019-09-25 07:44:25 · 295 阅读 · 0 评论 -
console篇 - Network 的骚操作
# 前言 Network 作为我们经常调试的 Chrome 面板，你知道它有哪些使用技巧吗？ # 1. 隐藏 network overview 你经常查看 Network 面板是为了: 我想看看请求的时间轴信息 我就想看看请求列表- 确认下请求状态，资源大小和响应结果呢 我赌你是后者，如果是这样，那么 Overview 的部分就没有任何理由占用 Network 接近一半的空间。隐藏它！ # 2....原创 2019-09-25 07:44:02 · 827 阅读 · 0 评论 -
通用篇 - 快捷键和通用技巧
# 前言 能直接快速提升开发效率的方式是什么？ 掌握快捷键 这里是一些我们在日常前端开发中，相当实用的快捷键： # 1. 切换 DevTools 窗口的展示布局 一般我在使用 DevTools 时， dock 的展示窗口都在底部 ，但是有时候我想把 dock 的窗口 切换到右边。 怎么做呢？ 这时就可以通过 DevTools 的下拉菜单，或者命令菜单...或者使用一个快捷键 ctrl + shif...原创 2019-09-25 13:55:41 · 156 阅读 · 0 评论 -
console篇 - Ninja console.log
有时你设置的断点是不是被执行了太多次？假设有一个包含 200 个元素的循环，但是你只对第 110 次循环的结果感兴趣，又或者你只对一些满足某些条件的结果感兴趣，怎么办呢？这就是我们要说的条件断点： # 1. Conditional breakpoints 条件断点 这样的情况下，你可以设置一个条件断点： 右击行号，选择 Add conditional breakpoint...(添加条件断点) 或...原创 2019-09-25 02:31:30 · 2212 阅读 · 0 评论 -
console 篇 - console 中的 ‘$‘
# 前言 $ 作为 jQuery 的选择器，承载了一代前端的太多记忆，但是你可能没有想到的是，在我们使用 Dev Tools 进行调试的时候，$ 也有大放异彩的一天呢？ # 1. $0 在 Chrome 的 Elements 面板中， $0 是对我们当前选中的 html 节点的引用。 理所当然，$1 是对上一次我们选择的节点的引用，$2 是对在那之前选择的节点的引用，等等。一直到 $4 你可以尝试...原创 2019-09-25 17:51:17 · 998 阅读 · 2 评论 -
console篇 - 异步的 console
如今，越来越多与浏览器有关的 API 都是 基于 Promise 的 。当你使用 promise 的时候通常配套用 .then(处理方法) 或者 将 promise 包裹在 async 方法中，再使用 await 来接收结果。 我们在 JavaScript/TypeScript 中大量使用的东西，但如果在 Console 中书写这样的结构很不方便。 像下面这样 或者这样 这样太难用了！不是输入...原创 2019-09-25 02:17:24 · 310 阅读 · 0 评论 -
console篇 - console中骚操作
# 前言 我最开始接触前端的时候，学会用的就是 console.log ，甚至现在，大部分情况也还在用它调试，但是，在不同的场景下，除了 log ，其实有更好的选择。 # 1. console.assert 在 MDN 中是这样定义的 console.assert(assertion, obj1 [, obj2, ..., objN]);console.assert(assertion, ms...原创 2019-09-25 11:26:48 · 509 阅读 · 0 评论 -
通用篇 - 代码块的使用
# 前言 我经常使用 JavaScript 作为我的自动化工具，来处理第三方网站和应用程序： 比方说，我想看看有多少人在我的所有媒体帖子上鼓掌。 Medium 没有提供这样的总数，所以我把这个小脚本组合在一起： $$('td:last-child .sortableTable-number') .map(el => parseInt(el.innerText)) .reduc...原创 2019-09-25 06:05:26 · 143 阅读 · 0 评论 -
你不知道的 Chrome 调试技巧
# 从 Chrome 说起 谷歌浏览器(通常简称为 Chrome )是由谷歌开发的网络浏览器。 它于 2008 年首次针对 Microsoft Windows 发布，后来移植到 Linux ，macOS ，iOS 和 Android 。 浏览器也是 Chrome OS 的主要组件，它可以作为 Web 应用的平台。Chrome-wikipedia 浏览器的市场天下三分，Chorme，Safari和...原创 2019-09-25 07:12:13 · 207 阅读 · 0 评论 -
console 篇 - console.log 的 “bug“ ?
一般来说，我们会使用 console.log() 来打印某个对象，并且，两次打印之间，还会对这个对象进行修改，最后我们查看打印的结果发现，修改前的打印和修改后的打印，竟然是一样的？这样出乎意料的情况，让我们难以继续 console.log 的调试。 口说无凭，举个例子把： 我们可以看到，一共有两次打印，一次是打印原始信息，一次是打印我们修改后的信息，并且我们把属性 a 从 0 改成 1 ，nam...原创 2019-09-25 03:53:23 · 469 阅读 · 0 评论 -
通用篇 - copying & saving
# 前言 在调试的过程中，我们总要对 Dev Tools 里面的数据进行 复制 或者 保存 的操作，所以我们来看看，关于这些，有什么小技巧呢？ # 1. copy(...) 你可以通过全局的方法 copy() 在 console 里 copy 任何你能拿到的资源，包括我们在后面[第六节]会提到的那些变量。例如 copy($_) 或 copy($0) # 2. Store as global (存...原创 2019-09-25 21:50:47 · 154 阅读 · 0 评论 -
元素面板篇 - 技巧集合
# 1. 通过 'h' 来隐藏元素 按一下 'h' 就可以隐藏你在元素面板中选择的元素。再次按下 'h' 可以使它出现。某些的时候这很有用：例如你想截图，但你想去掉里面的敏感信息。 # 2. 拖动 & 放置 元素 当你想看看页面的某一部分在 DOM 树的不同位置的显示效果时，只需要拖动放置它(到指定的位置)，就像在机器上的其他任何地方一样 ???? # 3. 使用 control (按钮) ...原创 2019-09-25 09:32:42 · 221 阅读 · 0 评论 -
通用篇 - 使用 Command
# 前言 我们直接可以直接看到的 DevTools 的功能，其实只是有限的一部分，怎么去探索更多的功能呢？ Command 菜单可以帮助我们快速找到那些被隐藏起来的功能，这也是它本身必不可少的原因。 如果你使用过 WebStorm 中的 Find Action (查找动作) 或者 Visual Studio Code 中的 Command Palette 的话，那么在 DevTools 中的 Co...原创 2019-09-25 02:47:31 · 432 阅读 · 0 评论 -
Typora工具使用
TyporaTypora是一款轻便简洁的Markdown编辑器，支持即时渲染技术，这也是与其他Markdown编辑器最显著的区别。即时渲染使得你写Markdown就想是写Word文档一样流畅自如，不像其他编辑器的有编辑栏和显示栏。对文字的特殊标注标题# 一阶标题 或者快捷键Ctrl+1## 二阶标题 或者快捷键Ctrl+2### 三阶标题 或者快捷键Ctrl+3##...原创 2020-01-03 16:38:55 · 639 阅读 · 0 评论