介绍
本文介绍在Energy中如何使用开发者工具(dev tools)
开发者工具(dev tools) 是前端开发人员常用的,在开发时调式代码、接口、资源加载、CSS调整等等,大多数场景都会使用。
energy封装了部分繁琐的chromium使用,其中之一包含开发者工具,你也可以自己自定义一些chromium功能。
启用方式
一、右键菜单和F12
- 创建 cef.NewChromiumConfig() 配置对象
- 启用右键菜单 SetEnableMenu(true)
- 启用开发者工具 SetEnableDevTools(true)
- 使用 cef.BrowserWindow.Config.SetChromiumConfig(config) 将配置对象设置到主窗口对象中
开发者工具默认需要启用右键菜单才能开启
设置启用开发者工具之后默认会启用F12快捷键方式
package main
import (
"github.com/energye/energy/cef"
)
func main() {
//全局初始化 每个应用都必须调用的
cef.GlobalCEFInit(nil, nil)
//创建应用
cefApp := cef.NewApplication(nil)
//主窗口的配置
//指定一个URL地址,或本地html文件目录
cef.BrowserWindow.Config.DefaultUrl = "https://energy.yanghy.cn"
//chromium 配置
config := cef.NewChromiumConfig()
config.SetEnableMenu(true) //启用右键菜单
config.SetEnableDevTools(true) //启用开发者工具
cef.BrowserWindow.Config.SetChromiumConfig(config)
//运行应用
cef.Run(cefApp)
}
效果图一
二、远程端口
-
创建 cef.NewApplicationConfig() 对象
- 设置并启用远程调式端口号 applicationConfig.SetRemoteDebuggingPort(8888)
该方式将会监听8888自定义端口号的ws监听
在远程或本地浏览器打开 http://127.0.0.1:8888/ 地址,展示需要调式的URL列表
package main
import (
"github.com/energye/energy/cef"
)
func main() {
//全局初始化 每个应用都必须调用的
cef.GlobalCEFInit(nil, nil)
applicationConfig := cef.NewApplicationConfig()
applicationConfig.SetRemoteDebuggingPort(8888) //开发者工具远程端口方式, 需自定义端口号
//创建应用
cefApp := cef.NewApplication(applicationConfig)
//主窗口的配置
//指定一个URL地址,或本地html文件目录
cef.BrowserWindow.Config.DefaultUrl = "https://www.csdn.net"
//chromium 配置
config := cef.NewChromiumConfig()
//config.SetEnableMenu(true) //启用右键菜单
//config.SetEnableDevTools(true) //启用开发者工具
cef.BrowserWindow.Config.SetChromiumConfig(config)
//运行应用
cef.Run(cefApp)
}
效果图二
1. 运行程序
2. 浏览器打开地址 http://127.0.0.1:8888/
3. 点击调式的地址