前端调试合集(包含移动端/内嵌h5) chrome的控制台是前端最强大的调试工具之一，很多FE同学每天在使用功能只是其中的一小部分，很多非常强大的功能值得我们继续深挖。可出输出console对象下不同方法的语义信息，info(普通信息)，log(日志)，error(错误信息)，warn(警告信息)，可以输出代码执行时抛出的错误。移动端调试的时候，如果需要查看自己打印的日志和请求返回，在不借助电脑调试的情况下，就可以借助vconsole插件来完成。打开Mac端safari，在开发选项找到移动端需要调试的页面，即可调起浏览器的控制台进行调试啦。
手把手教你从0到1开发浏览器插件 Chrome插件，官方名称extensions（扩展程序）；为了方便理解，以下都称为Chrome插件，或者简称插件，那么什么是Chrome插件呢？扩展程序是自定义浏览体验的小型软件程序。它们让用户可以通过多种方式定制Chrome的功能和行为。插件程序可以提供以下几个功能：生产力工具：网页内容丰富信息聚合乐趣和游戏可以通过点击更多 -> 扩展程序来查看所有安装的插件，或者直接打开插件标签页。
报错解决：You may need an additional loader to handle the result of these loaders. 根因是：当前webpack/babel 识别不了 export * as x x x from xxxx的语法（export 和 import的组合使用）或者 在.babelrc中配置。
你不知道的 CSS 之包含块 没错，因为我们对 div1 进行了定位，因此它会应用非根元素包含块计算规则的第三条规则，寻找离它最近的 position 的值不是 static 的祖先元素，不过显然 body 的定位方式为 static，因此 div1 的包含块最终就变成了初始包含块。首先 HTML 作为根元素，对应的包含块就是前面我们所说的初始包含块，而对于 body 而言，这是一个 static 定位的元素，因此该元素的包含块参照第一条为 html，以此类推 div1、p1、p2 以及 em1 的包含块也都是它们的父元素。
事件循环，还在微任务宏任务？过时了，快看看新版浏览器事件循环event loop(message loop) 程序运⾏需要有它⾃⼰专属的内存空间，可以把这块内存空间简单的理解为进程。：有了进程，就可以执行程序代码了，一个进程至少包含一个线程，这个线程称之为主线程。如果想要多块代码同时运行，
新版原型和原型链详解，看完整个人都通透 思考一个问题，如果访问doSomeInstancing里的一个属性，浏览器是怎么做的？浏览器首先会查看中是否存在这个属性如果不包含属性信息，那么浏览器会在的__proto__中进行查找 (同). 如属性在的__proto__中查找到，则使用中__proto__的属性。否则，如果中__proto__不具有该属性，则检查的__proto__的__proto__是否具有该属性。默认情况下，任何函数的原型属性__proto__都是因此，通过的__proto__的__proto__( 同的__proto__
在云服务器上部署nuxt服务端渲染服务（亲测线上） 打包完毕得到最新的.nuxt包注意：.nuxt文件是以.开头的，属于隐藏文件，mac电脑快捷键shift+command+. 可以显示出隐藏文件;windows的话查看文件夹选项，勾上显示隐藏文件
实测在Nuxt中自定义loading加载效果，搭配nuxt/axios拦截器 首先说一下我用的loading是一个第三方json动画库，底层用了window和document对象，在服务端会报错，只能在客户端跑。所以在服务端运行的请求钩子是不能进行loading效果的先引入第三方动画库lottiefiles我的版本是^1.5.6npm install @lottiefiles/lottie-player在plugins下创建一个Loading文件夹，Loading下创建一个lottiePlayer.js全局引入该模块// 引入lottiefilesimpo.
实测Nuxt坑，配置@nuxt/axios、拦截器、代理跨域，请求 下载第三方模块@nuxtjs/axiosnpm install @nuxtjs/axios// 自动帮你下载@nuxtjs/proxy在nuxt.config.js中配置代理和启用@nuxtjs/axios模块下面一些配置都是我的各环境变量不会的话参考普歌-实测Nuxt.js入坑，配置dev、test、pro三种环境的变量envmodule.exports = { // 环境变量 env: { NODE_ENV: env[process.env.NODE_ENV].NODE
实测Nuxt.js入坑，配置dev、test、pro三种环境的变量env 先下载一个cross-env模块，比较好控制环境npm install cross-env在package.json中写入环境的配置 "scripts": { "dev": "cross-env NODE_ENV=dev nuxt --open ", "test": "cross-env NODE_ENV=test nuxt", "build": "cross-env NODE_ENV=pro nuxt build", "start": "cross-env NOD
Vue-cli3|4 打包build优化（vue.config.js+nginx+gzip）已实战测试chunk大小小了3倍 哈哈哈。好久没更新了，因为参加了工作和校招面试，还有一部分是自己学习。大部分笔记都写在印象笔记上了，后续会持续分享哈。分入口文件因为我们打包时需要不同的main配置文件。方便进行打包需要在根目录下创建两个main文件。在vue.config.js中写入webpack语法或者vue.config提供的语法。识别环境变量(我环境变量是通过cross-env进行控制)module.exports = { chainWebpack: config => { config.whe.
.sh脚本shell编写简单的git自动提交（无分支，个人项目适合） shell基本操作命令pwd->是获取当前文件夹的绝对路径把pwd下面是获取当前shell文件所在的文件绝对路径，并赋给变量SHELL_FOLDERSHELL_FOLDER=$(cd "$(dirname "$0")";pwd)read -p "输入：" msg->read代表能输入某些东西并赋给msg变量echo ""->一行提示文本空值判断// 空值判断if [ ! $msg ]; then echo "IS NULL"else echo "NOT
uniapp中或小程序中使用背景水印（canvas实现+原生组件层级高的解决） 代码结构<!-- 水印 --><view class='water_top'> <canvas canvas-id='watermarkCanvas' style='width:100%;height:100%'></canvas></view><script> export default { data() { return { } }, onLoad() { this.drowsyUs
(mac m1亲身教程)iterm配置oh-my-zsh以及iterm配置dracula主题 一、 查看系统shells是否安装zsh，通常默认是bash（M1默认使用的是 zsh所以不修改安装了再说了 M1用户忽略这一步）查看系统是否有 zsh. cat /etc/shells如果没有安装zsh，请使用下面命令安装pacman -S zsh二、 首先安装iTem2iterm2官网下载安装(https://iterm2.com/)三、 安装oh-my-zsh方式一:官网的正常安装方式（如果安装oh-my-zsh时由于github登陆失败（443）而无法安装，可以使用方
原生js实现移动h5端可滑动轮播图、自动轮播（数字导航,无知识点） 原生js移动h5端简单可滑动轮播图(rem适配)很多移动端轮播图是需要这个触摸滑动的功能，js中映射就是touch、touchmove、touchend这三个事件,看看效果图直接放代码html<!-- 轮播图区域 --> <div id="banner-area"> <div id="banners-img"> <div class="img-area"> <img src="./images/banner
vue中配合axios的拦截器实现自定义loading组件（插件） 前言：在vue中想实现loading加载可以使用NProgress，如果效果没有达到想要的效果就可以用自定义loading先搭建一个loading组件在components下创建一个Loading/loading.vue的文件，现附上loading代码<template> <div class="loading-page" v-if="loading"> <div data-loader="jumping"></div> <p.
vue项目中通过文件操作进行动态加载路由(router.js) 前言：在vue项目中都需要配置router，而在一个项目中需要配置的静态路由非常多，一个router.js文件下写几百行代码，这也太xxxx了解决的话一个是后端提供路由进行路由动态加载渲染，另一种就是对路由文件的动态加载接下来我们来实现下路由文件的动态加载第一步，在创建vue文件时，可以在同级文件夹下在创建一个router.js，在这里面配置本路由及其子路由//路由懒加载const Login = () => import(/* webpackChunkName: "log..
关注
