dev theia

electron集成开发者工具的探索

electron是一款使用浏览器前端技术来开发桌面应用的神奇，点我跳转electron的官方网址，在其官网可以了解到详细的说明和文档信息。

electron下载到本地安装成功后，需要将安装目录添加到PATH当中，以便于在CMD中使用electron指令来运行electron程序。

官网的electron的基本demo的引入和使用如下面所述：

1
2
3
4
5
6
7
$ git clone https://github.com/electron/electron-quick-start

# Go into the repository
$ cd electron-quick-start

# Install the dependencies and run
$ electron .

通过以上的三个命令可以启动electron-quick-start这个简单的程序。

下面我们来解决如果在electron下实现开发者工具内嵌页面使用的问题。

chrome开发者工具

Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。

chrome开发者工具可以在这个地址找到详细的说明和使用帮助信息。

electron对开发者工具的支持

electron可以通过其API打开开发者工具。

1
2
3
4
5
6
let win = new remote.BrowserWindow({
	webPreferences:{webSecurity:false},
	autoHideMenuBar:true
});
win.loadURL("http://light.hscloud.cn");
win.openDevTools();

另外一种方法可以将开发者工具关联到F12的快捷键，就像我们使用chrome浏览器进行浏览一样。

1
2
3
4
5
6
7
8
9
<script>
	document.addEventListener("keydown", function (e) {
		if (e.which === 123) {
			require('remote').getCurrentWindow().toggleDevTools();
		} else if (e.which === 116) {
			location.reload();
		}
	});
</script>

但是，遗憾的是，electron并没有提供对开发者工具的API编程接口，所以无法对其进行方便的处理，已将开发者工具集成到实际的桌面工具中。

但是，我们在微信的小程序的开发者工具中看到了其对开发这个工具的扩展开发和使用，所以也就证明了对开发者工具是可以进行编程化处理的，下面我们就来解决这个问题。

在electron中启用开发者工具

搜遍互联网，在electron中没有找到任何解决方案，但是偶然在chrome的api中看到了解决这个问题的希望，可能这才是真正正确的方向，要使用chrome的extention的api需要先创建extention项目，我直接在github上面搜索了一个作为基础的修改起点，这样才能调用extention对应的api吧。

源代码地址

chrome浏览器提供的API

依然没有解决问题！

搜索stackoverflow发现了以下的问题和答案：

How to toggle Device Mode on a popup window in Chrome?
I have a web app with a chat that opens in a new popup window. Normally, in Chrome I can hit F12 and click the icon of a smart phone to toggle it. But in the popup window this icon does not appear. This is important for me since I need to throttle the connection of the popup in order to simulate a user disconnecting from the chat.
Thanks!


It doesn't seem to be currently possible. I've opened a ticket for you. Meanwhile you have couple of options:
1. open popup in a regular window (copy paste the url, or modify window.open call to open a new tab instead of a separate window),
2. create a Chrome extension that uses debugger API to send emulateNetworkConditions message to your popup window
3. or try hacking DevTools like so:
open DevTools (A) for your popup
focus on DevTools window and open another DevTools (B) for that window using a keyboard shortcut (F12/alt+cmd+J)
in the console of the DevTools B call WebInspector.overridesSupport.setEmulationEnabled(true) (to enable emulation) and then WebInspector.overridesSupport.settings.networkConditions.set({throughput: 1.5 * 1024, latency: 40}); (to enable network throttling)

WebInspector是个什么鬼？浏览器原生支持吗？

experimental.webInspector.panels API
The experimental.webInspector.panels API has been renamed to chrome.experimental.devtools.panels. The old namepsace is deprecated and will be removed from future versions of Chrome.

API肯定是调用chrome.experimental，接下来就是要确认怎么样才能调用到这个api