Edge_devtools 源码学习

1. view.ts 解读

改类ScreencastView 主要目的就是提供一个render函数，在该函数就做了一件事this.htmlTemplate

render(): string {
  const deviceList = this.getDeviceList(emulatedDevices);
  return this.htmlTemplate(this.webviewCSP, this.cssPath, this.codiconsUri, this.inspectorUri, deviceList);
}
// this.htmlTemplate 就返回了 一个 html 格式的文件。

使用类封装的函数，可以生成一个新的内存地址，减少重复代码。

该函数被screencastPanel.ts 的getHtmlForWebview调用：

getHtmlForWebview() {
  ....
  const view = new ScreencastView(...)
	return view.render()
}

而对应的 javascript 则保存在out/screencast/screencast.bundle.js，而源码部分在：screencast.ts

2.ScreencastPanel.ts 解读

第一步看下constructor函数中做了什么？

// private 说明该属性是 父类 独有的特性，可由 this.attribute 调用
// static 静态方法，即 不能在类的实例上调用静态方法，只能父组件自己调用
private panelSocket： PanelSocket; // 有一个类
private constructor(
	this.panel = panel; // 即，外部创建好的 webview
  this.context = context;  // 即，vscode 环境
  this.extensionPath = this.context.extensionPath; // 即，vscode中读取的当前路径。
)

可以看下还有哪儿些方法：

private constructor{
  this.panel.onDidDispose() // 将 extension.ts 中的代码由类实现了。
  this.panel.onDidChangeViewState()
  this.panel.webview.onDidReceiveMessage() // 这里相当于接受 webview（html） 传递内容
}

还有暴露了ScreencastPanel.createOrShow 给外部的extension.ts，用于创建 webview

还做了啥？构建了一个websocket，PanelSocket

this.panelSocket = new PanelSocket(this.targetUrl, (e, msg) => this.postToWebview(e, msg))

上面的写法其实在vscode中出现，把第1个参数，传给第2个参数的回调函数。

即，本质上就是调用了postToWebview函数，而与上面相关，是将第2、3个参数，传给第一个回调函数，本质上调用 webview.postMessage，即往webview中传递参数

private postToWebview(e: WebSocketEvent, message?: string) {
  encodeMessageForChannel(msg => this.panel.webview.postMessage(msg) as unknown as void, 'websocket', { event: e, message });
}

本质上也是传给html，也即screencast.bundle.js的。

3. screencast：html 的 script 解读

看 url 变化：

this.urlInput.addEventListener('keydown', event => this.onUrlKeyDown(event));
private onUrlKeyDown(event: KeyboardEvent): void {
  ....
  this.cdpConnection.sendMessageToBackend('Page.navigate', {url});
  }
}

通过 cdpConnection 专门进行与extension.ts进行交互。

 cdpConnection = new ScreencastCDPConnection();

而专门去看cdp.ts（ScreencastCDPConnection）文件，可以发现提供了：

constructor(){
  window.addEventListener("message",()=>{}) // 接受 extensions.ts 的信息
}
sendMessageToBackend() // 向 extension.ts 发送信息
registerForEvent() // 往 eventCallbackMap 注册回调函数

这部分可以专门学习这种写法。

4. extension.ts 是如何接受数据呢？

实际上这部分也由组件完成，