介绍

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