#25 F12 网络过滤器

WebDev Chrome 2023-07-16

示例

mime-type:image/png larger-than:1K
# Edge 官方示例，表示过滤出大于 1K 的 PNG 图片

domain:*.csdn.net method:POST
# 过滤出 CSDN 域的 POST 请求。

has-response-header:Content-Type -domain:*.baidu.com
# 过滤出带 Content-Type 头的请求，排除百度域。

清单

属性 详情
domain 仅显示来自指定域的资源。您可以使用通配符（*）来包含多个域。
例如，*.com 会显示所有以 .com 结尾的域名资源。
DevTools 会将所有找到的域名填充到自动完成下拉菜单中。
has-response-header 显示包含指定 HTTP 响应头的资源。
DevTools 会将所有找到的响应头填充到自动完成下拉菜单中。
is 使用 is:running 查找 WebSocket 资源。
larger-than 显示大于指定大小的资源，单位为字节。
设置值为 1000 相当于设置值为 1k。
method 显示通过指定的 HTTP 方法类型检索的资源。
DevTools 会将所有找到的 HTTP 方法填充到下拉菜单中。
mime-type 显示指定 MIME 类型的资源。
DevTools 会将所有找到的 MIME 类型填充到下拉菜单中。
mixed-content 显示所有混合内容资源（mixed-content:all），或仅显示当前显示的资源（mixed-content:displayed）。
scheme 显示通过不安全的 HTTP（scheme:http）或安全的 HTTPS（scheme:https）检索的资源。
set-cookie-domain 显示具有与指定值匹配的 Set-Cookie 标头中的 Domain 属性的资源。
DevTools 会将所有找到的 Cookie 域填充到自动完成中。
set-cookie-name 显示具有与指定值匹配的 Set-Cookie 标头中的名称的资源。
DevTools 会将所有找到的 Cookie 名称填充到自动完成中。
set-cookie-value 显示具有与指定值匹配的 Set-Cookie 标头中的值的资源。
DevTools 会将所有找到的 Cookie 值填充到自动完成中。
status-code 显示与特定 HTTP 状态码匹配的资源。
DevTools 会将所有找到的状态码填充到自动完成下拉菜单中。
  1. 多个条件之间是 AND 关系，OR 关系暂时不支持。
  2. 前面加上 - 表示取反，小技巧：可以通过输入 - 之后的自动补全查看所有支持的选项。

参考资料与拓展阅读

#24 Web 分词 API

WebDev JavaScript 2023-04-21

看了 How to split JavaScript strings into sentences, words or graphemes with "Intl.Segmenter" 了解到，现在 Web 已经支持分词了：

const text = `我爱北京天安门，天安门上太阳升。伟大领袖毛主席，指引我们向前进。`;
const granularities = ["sentence", "word", "grapheme"];
granularities.forEach(function (granularity) {
  // console.log([granularity, index, self])
  let segmenter = new Intl.Segmenter("zh", { granularity: granularity });
  let seg = segmenter.segment(text);
  // console.log(seg) // Segments{}
  let result = Array.from(seg, (s) => s.segment);
  console.log(result);
});
// ['我爱北京天安门，天安门上太阳升。', '伟大领袖毛主席，指引我们向前进。']
// ['我', '爱', '北京', '天安门', '，', '天安门', '上', '太阳', '升', '。', '伟大', '领袖', '毛主席', '，', '指引', '我们', '向', '前进', '。']
// ['我', '爱', '北', '京', '天', '安', '门', '，', '天', '安', '门', '上', '太', '阳', '升', '。', '伟', '大', '领', '袖', '毛', '主', '席', '，', '指', '引', '我', '们', '向', '前', '进', '。']

#23 基于 Web 技术的跨平台应用解决方案

WebDev 2023-02-01
  • Web App，纯 Web App，需要用浏览器打开

随着浏览器厂商的持续推进，现在 WebApp 也能实现很多底层交互了

  • Native App，各平台的原生应用

  • Hybird App，在 App 中加入 WebView，实现部分逻辑
    根据 Native 和 Web 部分的比例，可以分成：

  • 交替

  • 混合，同一个窗口中，主体内容采用原生实现，部分组件是 WebView + WebApp（类似浏览器）
  • WebView + WebApp 为主体逻辑，加上 Native 交互

后端和框架核心通信，实现窗口管理，系统调用，WebView。

  • Electron
  • React Native (RN)
  • Tauri，后端开发语言 Rust，使用系统自带浏览器组件
  • Cordova
  • Ionic
  • NW.js
  • Expo
  • Capacitor
  • Quasar
  • NativeScript
  • Gluon

参考资料与拓展阅读

#22 Fetch API

WebDev JavaScript Ajax 2022-08-02

在很长一段时间里，浏览器发送 Ajax 请求主要依赖 XMLHttpRequest，也就是大家熟悉的 XHR。
但随着 JavaScript 生态的发展，XHR 的一些问题越来越明显：

  • 代码太啰嗦
  • 回调层级复杂
  • 错误处理麻烦
  • 可读性较差

于是浏览器推出了更现代、更简洁的网络请求方案 Fetch API。

XMLHttpRequest 的问题

先看一个传统 Ajax 请求：

var xhr = new XMLHttpRequest();
xhr.open("GET", "/api/user", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4) {
    if (xhr.status == 200) {
      console.log(xhr.responseText);
    }
  }
};
xhr.send();

虽然功能没问题，但存在几个明显缺点：

  1. 状态判断复杂：必须反复判断 readyState 和 status，初学者经常搞混。
  2. 回调代码较多：所有逻辑都写在 onreadystatechange 里面，代码一多就会非常乱。
  3. 服务器返回 JSON 时需要手动转换。
    JSON.parse(xhr.responseText)

Fetch 的基本写法

主要是基于 Promise 实现，可以链式调用，不用一层又一层地回调，更符合现代 JavaScript 风格。
注意：这是较新的语法，在某些老版本浏览器上可能支持程度不好，如果需要兼容，可以使用 XHR 或者 Axios、jQuery Ajax 等库。

fetch("/api/user")
  .then(function (response) { // Response 对象
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  })
  .catch(function (error) { // 异常处理
    console.log(error);
  });

相比 XMLHttpRequest：

  • 代码明显更短
  • 结构更清晰
  • 更容易阅读

Fetch 也支持提交数据：

fetch("/api/user", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    name: "Tom",
    age: 18
  })

})
.then(function (response) {
  return response.json();
})
.then(function (data) {
  console.log(data);
});

参考资料与拓展阅读

#20 公共库 CDN

WebDev CDN 2022-02-19

公共库 CDN，也叫静态资源库。

我想了一下，国内公共库 CDN 全面挂了可能是由于监管压力。
在国内，如果 CDN 提供的静态资源被一些恶意网站引用，会被问责。如果要全面审核使用 CDN 的网站，肯定是会增加太多的管理成本。
感觉这真是太不合理了！

如果是线上项目，不要用公共库 CDN。
小项目自己管理静态资源，大项目可以用付费的 CDN 服务。

BootCDN

https://bootcdn.cn

我之前用的最多的 CDN，但是总是挂，心累。现在开始用字节跳动 CDN 了。

字节跳动 CDN

http://cdn.bytedance.com/

CloudFlare CDN

https://cdnjs.com/

JsDelivr

https://www.jsdelivr.com/

不可用清单

百度 [不可用]

http://cdn.code.baidu.com

已经挂了。

腾讯 [不可用]

https://libs.qq.com/

打不开。

新浪 [不可用]

http://lib.sinaapp.com/

只有很少的资源。

360 [不可用]

http://libs.useso.com/

又拍云 [不可用]

http://jscdn.upai.com/

只有很少的资源。

七牛云 [不可用]

http://www.staticfile.org/

感觉很久没有维护了。一些常用库都非常老了。

参考资料与拓展阅读

#19 DNS_PROBE_FINISHED_NXDOMAIN

WebDev DNS 2021-12-14
  1. 浏览器突然打不开 zhihu.com, 报 DNS_PROBE_FINISHED_NXDOMAIN。
  2. Windows 网络诊断之后说是 DNS 不可用。
  3. 经过检查，使用 DHCP 获取到的 DNS 172.16.0.1。
  4. 改成 AliDNS: 223.5.5.5, 223.6.6.6 之后就好了。
  5. 然后再改回默认的 DNS 发现也能正常访问了。

我应该在出现问题的时候先尝试 nslookup 一下，看看 DNS 解析出来的到底是个什么结果。
下次遇到再继续更新。

C:\Users\Administrator>ipconfig /all | findstr DNS
   主 DNS 后缀 . . . . . . . . . . . :
   连接特定的 DNS 后缀 . . . . . . . :
   DNS 服务器  . . . . . . . . . . . : 172.16.0.1
   连接特定的 DNS 后缀 . . . . . . . :
   DNS 服务器  . . . . . . . . . . . : fec0:0:0:ffff::1%1
   连接特定的 DNS 后缀 . . . . . . . :
   连接特定的 DNS 后缀 . . . . . . . :
   连接特定的 DNS 后缀 . . . . . . . :
   连接特定的 DNS 后缀 . . . . . . . :

C:\Users\Administrator>nslookup zhihu.com
服务器:  UnKnown
Address:  172.16.0.1

非权威应答:
名称:    zhihu.com
Address:  103.41.167.234