转载:http://newsn.com.cn/say/electron-devtools.html

electron开发的过程中,可以用代码控制打开自带chromedevtools开发者工具,进而调试渲染教程页面。

平时,我们利用chrome要调试网页的时候,按F12(mac下面是shift+花+i)打开的开发者工具,就是这个devtools,或者可以称之为“开发者模式”

1.打开devtools

mainWindow.webContents.openDevTools();

默认状态下,开发者工具的位置是上一次工具打开的位置(左边,右边,下边都有可能。取决于上一次的状态,但不会是分离状态,也没有处于顶部的状态)。

界面右侧打开devtools

mainWindow.webContents.openDevTools({mode:'right'});

界面底部打开devtools

mainWindow.webContents.openDevTools({mode:'bottom'});

界面左侧打开devtools

mainWindow.webContents.openDevTools({mode:'left'});

分离状态打开devtools

mainWindow.webContents.openDevTools({mode:'detach'});

Electron 打开开发者工具 devtools的更多相关文章

  1. Chrome 开发者工具(DevTools)中所有快捷方式列表

    Chrome DevTools提供了一些内置的快捷键,开发者利用这些快捷键可以节省常工作中很多日的开发时间.下面列出了每个快捷键在Windows/Linux及Mac中的对应键.其中一些快捷键对于Dev ...

  2. Chrome 开发者工具(DevTools)中所有快捷方式列表(已整理)

    Chrome 开发者工具(DevTools)中所有快捷方式列表(已整理) 前言 Chrome DevTools提供了一些内置的快捷键,开发者利用这些快捷键可以节省常工作中很多日的开发时间.下面列出了每 ...

  3. Mac下safari、chrome打开开发者工具快捷键

    mac下safari和chrome打开开发者工具的快捷键相同,都是option(alt)+command+i 这个是我的默认配置,没有更改过的.

  4. MAC 打开Chrome打开开发者工具的快捷键

    mac下safari和chrome打开开发者工具的快捷键相同,都是 option(alt)+command+i 这个是我的默认配置,没有更改过的.

  5. IE9浏览器打开开发者工具代码正常执行,反之报错

    1.can i use console  IE9开发者工具打开时支持console对象,否则报错. 2.由于出现错误 80020101 而导致此项操作无法完成 测试代码 <!DOCTYPE ht ...

  6. 屏幕分辨率测试工具(舍弃)---chrome开发者工具devTools(强烈建议系统学习)

    2019-01-25 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  7. 爬虫笔记之JS检测浏览器开发者工具是否打开

    在某些情况下我们需要检测当前用户是否打开了浏览器开发者工具,比如前端爬虫检测,如果检测到用户打开了控制台就认为是潜在的爬虫用户,再通过其它策略对其进行处理.本篇文章主要讲述几种前端JS检测开发者工具是 ...

  8. 禁止打开 F12 开发者工具

    禁止F12 window.onkeydown = window.onkeyup = window.onkeypress = function (event) { // 判断是否按下F12,F12键码为 ...

  9. Chrome开发者工具Debug入门

    译者按: 手把手教你摆脱console.log,掌握高级的debug方法. 原文: Learn How To Debug JavaScript with Chrome DevTools 译者: Fun ...

随机推荐

  1. OSPF 多区域配置

    通过配置OSPF协议使网络互通. 实验拓扑 如图所示连接,地址规划如下: 名称 接口 IP地址 R1 f1/0 192.168.10.1/24 R1 f0/0 192.168.20.1/24 R1 f ...

  2. 解决:IntelliJ IDEA输入法不跟随光标

    主界面 Ctrl+Shift+a 输入 switch boot jdk 然后回车 选择自己安装的jdk: 如果没有找到,就点最下面的...,然后找到自己的jdk安装路径,确定即可. 保存自动重启就ok ...

  3. js--获取和设置css属性

    在这一章我们讲述一下如何通过js来操作css中的属性 1,首先,我们想获取元素的一些属性.例如innerHTML,value等值时,我们可以 var object=document.getELemen ...

  4. Spring Cloud 之 Consul 知识点:服务注册与发现(类似工具:Eureka、ZooKeeper、Etcd)

    资料 网址 springcloud(十三):注册中心 Consul 使用详解 http://ityouknow.com/springcloud/2018/07/20/spring-cloud-cons ...

  5. nginx访问url内容过滤

    当访问的url中含有/%df时返回404 location / { if ($request_uri ~* "/%df") { # return 200 "error&q ...

  6. mac 上配置flutter开发环境

    (ios,Android,Xcode,Android Studio,VScode,IDEA) 1)安装Flutter SDK 2)iOS 环境配置 3)Android Studio配置 4)VS co ...

  7. XXE(外部实体注入攻击)

    利用XXE漏洞可以进行拒绝服务攻击.文件读取.命令代码执行.SQL(XSS)注入.内外扫描端口和入侵内网站点等,内网探测和入侵是利用XXE中支持的协议进行内网主机和端口的发现,可以理解为使用XXE进行 ...

  8. Nginx 代理到Jetty 页面跳转端口改变问题

    Nginx安装 Windows下部署Nginx只需下载安装包,解压启动服务器即可.下载官网:http://nginx.org/en/download.html 操作Nginx首先进入安装文件夹: 查看 ...

  9. JS的ES6的iterator

    一.iterator 1.概念:iterator是一种接口机制,为各种不同的数据结构提供统一的访问机制. 2.作用: 为各种数据结构,提供一个统一的.简便的访问接口: 使得数据结构的成员能够按某种次序 ...

  10. nginx 篇

    nginx 安装 下载必要组件 nginx下载地址 http://nginx.org/en/download.html pcre库下载地址,nginx需要 http://sourceforge.net ...