问题

chrome://inspect 调试android 打开404

常见的问题是 因为这个网址是在线的被墙了

挂个代理就行

但并不是这个问题(同一个手机里面 chrome的页面能调试，但要调的应用的页面打开404)

手机应用里的 浏览器版本@6cd201cc270433b22442a58084295da1ff3c1370 并没有对应的调试 (87.0.4280.86)

作为对比@d8a506935fc2273cfbac5e5b629d74917d9119c7 (86.0.4240.198) 是可用的

https://chrome-devtools-frontend.appspot.com/serve_file/@7f3cdc3f76faecc6425814688e3b2b71bf1630a4/inspector.html

最近 ubuntu snap 管理的chromium 貌似停在了一个尴尬的版本上, 升级了一下？似乎也不是这个问题

解决

让客户端给了一个新的包（浏览器版本换了）

参考

https://snapcraft.io/chromium

https://stackoverflow.com/questions/33632793/chrome-inspect-without-internet-connection

https://stackoverflow.com/questions/47723176/remote-debugging-chrome-on-android-while-offline

发现android 11 开发者模式 多了个无线调试

准备

android 11，开发者模式

电脑：

android platform tools adb 30 版本

1
2
3
4

adb --version
Android Debug Bridge version 1.0.41
Version 30.0.5-6877874 # 这里 要30版本
Installed as /<your path>/Sdk/platform-tools/adb

使用

手机上：

mkpipe

众所周知

ls | grep hey中的竖线是pipe，

同样，我们可以用mkfifo创建命名的管道

创建

1

mkfifo /tmp/pipedemo

输入

1

ls > /tmp/pipedemo

读出

1

cat < /tmp/pipedemo

输入和读出不用保证执行顺序

对于css

1
2
3

html {
  scroll-behavior: smooth;
}

用id + hash的方式滚动

对于js

事件:

1

window.addEventListener('scroll', callback);

throttle + js判断后 再增删 class

详细：下面30k viewed的页面

https://stackoverflow.com/questions/32395988/highlight-menu-item-when-scrolling-down-to-section

直接上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function fn(){console.log('fn print')}
function fn1(){console.log('fn1 print')}
function fnthis(){console.log(this);}

console.log(fn.call == Function.call)
console.log(fn.call.call == Function.call)
console.log(Function.call.call == Function.call)

fn.call(fn1)
fn.call.call(fn1)
Function.call(fn1)
Function.call.call(fn1)

fn.call(fnthis)
fn.call.call(fnthis)
Function.call(fnthis)
Function.call.call(fnthis)

根据mdn上的call的文档

function.call(thisArg, arg1, arg2, ...)

所以

1
2
3
4

fn.call(fn1) // 调用fn函数，在函数执行中的 this = fn1，
fn.call.call(fn1) // 调用Function.call函数，在函数执行中的 this = fn1，
Function.call(fn1) // 调用Function.call函数，但是是参数传递了fn1,而不是this = fn1
Function.call.call(fn1) // 和第二个相同

总结

setTimeout 启动的宏任务

promise(以及await的写法) 和 observer 都是微任务

执行是单线程，当宏任务执行完后，把所有等待的微任务执行后，才会执行下一个宏任务。

然后作者举例了一个稍微特殊一点的，html的事件冒泡，父子元素都有点击事件。

• 鼠标点击子元素。分发是靠浏览器分发，对于js的任务是两个click。

• 代码调用子元素点击事件，也会触发冒泡，但是对于js的任务是 这个调用代码。

因此上面两种看似相同的点击会有不同的执行顺序。

参考

https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

有精力建议，直接看上面原文，作者的demo做得很好的！

以外的话 还有mdn的文档看

https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide

https://zh.javascript.info/event-loop

https://stackoverflow.com/questions/25915634/difference-between-microtask-and-macrotask-within-an-event-loop-context

对于不应该阻塞事件循环的耗时长的繁重计算任务，我们可以使用 Web Workers。https://html.spec.whatwg.org/multipage/workers.html

这是在另一个并行线程中运行代码的方式。

Web Workers 可以与主线程交换消息，但是它们具有自己的变量和事件循环。

Web Workers 没有访问 DOM 的权限，因此，它们对于同时使用多个 CPU 内核的计算非常有用。

安装配置

安装启动

Debian 系列

1

apt install redis-server

也可以考虑官网下源码自己编译，或者docker直接pull

修改/etc/redis/redis.conf中supervised no为supervised systemd (Ubuntu 用systemd初始化系统的这样设置

通用的重启

1
2
3

systemctl restart redis.service
# 查看状态
systemctl status redis

个人电脑取消它开机启动systemctl disable redis

基本使用

啊 这个cli的提示真的香

总

直接用devtools就不说了

现在说生产强制可调是，iqiyi为例

首先进入 vuejs.org 保证 控制版上有Vue标签

然后用同样的网页打开iqiyi保证 这个标签还存在

Sources->Page -> 右键 top -> search in all files

输入file:* devtools 搜索出文件

找到你觉得可能的文件（iqiyi是common.balabala…），格式化(chrome的花括号)，在devtools:!1执行后一句加断点。

刷新页面,在console中执行修改，例如G.devtools = true;，点调试的pause（暂停继续）按钮，切回Vue标签即可

总

有收获但不推荐 4/10推荐度，如果要看，看附录3就好了。

书

表达的逻辑

人单次记忆7+-2左右事物，如果更多会自动去抽象范畴高级归类

讲解从顶向下，直接讲解联系，否则听取的人是自己脑补的联系，很大可能是和讲解意图不同。

另一个角度，先承认人脑在处理记忆的时候会自动做的事情，对于其中有误差和负担的部分，先直接的讲解清楚。

提示

读者会将读到的细想进行归类分组和总结，以便记住，如果作者传达给读者的思想已经实现进行了归类和概括，并且按自上而下的顺序呈现，读者就能更容易理解作者表达的思想。以上会所名，条例清晰的文章应当具有金字塔结构，并且不断“自上而下”地向读者传递信息，虽然在开始写作时作者的西路是“自下而上”的。

提示

金字塔中的思想以3种方式互相关联——向上、向下和横向。位于一组思想的上一个层次的思想是对这一组思想的概。这一组思想则是对其上一层次的思想的解释和支持。

文章中的思想必须符合以下规则。

描述

期望

1
2
3
4

点击按钮
显示div
旋转4.5秒
隐藏div

BUG:

在android和ios(系统版本<=12)上正常的代码，在ios(>=13.5.1)上 如果前后角度相同会无法旋转

代码vue