介绍

本文介绍在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)
}