转载: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. Golang: 接收命令行输入

    上次我们介绍了收集命令行参数的几种方式,感觉还是不过瘾,今天再来介绍一下如何从命令行接收用户输入. 我们这里设计一个小需求,借助程序从命令行收集用户的逐行输入,以 bye 为结束信号,然后在输入结束后 ...

  2. PHP开发环境WAMP(Windows+Apache+MySQL+PHP)搭建

    关于PHP开发环境这一块,网上有很多的集成环境可以使用,eg. WampServer,XAMPP,PhpStudy,Appserv ...用起来也很方便(但是我并没有比较过哪个更好用一点),但是呢,比 ...

  3. python爬取站长之家植物图片

    from lxml import etree from urllib import request import urllib.parse import time import os def hand ...

  4. OneDrive,在云端

    应用场景 1.一份文档下班后还没编辑好,发送到自己的QQ/微信回家后继续编辑: 2.由于来回拷贝同一份文件,导致版本太多,忘记那个是最新版本了: 3.出门在外,客户突然需要一份重要文档,这份文件放在办 ...

  5. C++学习(8)—— 封装

    C++面向对象的三大特性:封装.继承.多态 C++认为万事万物都可以为对象,对象上有其属性和行为 具有相同性质的对象,可以抽象为类   1. 封装的意义 封装是C++面向对象三大特性之一 封装的意义: ...

  6. 201671010436 王雪刚 实验十四 团队项目评审&课程学习总结

    一:实验名称:团队项目评审&课程学习总结 二:实验目的与要求 (1)掌握软件项目评审会流程: (2)反思总结课程学习内容. 三:实验步骤 任务一:按照团队项目结对评审名单,由项目组扮演乙方,结 ...

  7. mybatis框架-使用resultMap实现高级结果映射,association属性

    需求:查询数特定角色下的所有用户列表 首先需要在在User类中引用Role类,因为引用了复杂的数据类型,所以要使用association属性进行映射,其实起主要作用的还是resultMap属性. /* ...

  8. React Tutorial: Basic Concept Of React Component---babel, a translator

    Getting started with react.js: basic concept of React component 1 What is React.js React, or React.j ...

  9. HDU6704 K-th occurrence

    [传送门] 先求出SA和height.然后找到 rank[l] 的 height 值.能成为相同子串的就是和rank[l]的lcp不小于 $len$ 的.二分出左右端点之后,主席树求第k小即可. #i ...

  10. RabbitMQ简单介绍+Windows环境安装

    文章目录 1.RabbitMQ简介2.RabbitMQ与其他MQ有什么不同3.RabbitMQ环境安装3.1 安装erlang3.2 安装rabbitmq-server4. RabbitMQ管理平台介 ...