Cách đưa Chrome DevTools vào điện tử?

Question

Tôi vẫn còn mới đối với Electron mà tôi hiện đang theo dõi here.

Tôi đã đọc điều này page về cách bao gồm Chrome DevTools để tôi có thể gỡ lỗi ứng dụng của mình một cách dễ dàng. Tôi đã theo các tài liệu nhưng một khi tôi thực hiện lệnh electron <app-name> nó sẽ trả về một lỗi: The app provided is not a valid electron app, please read the docs on how to write one...

Đây là khối mã từ main.js tập tin của tôi:

var app = require('app'); 
var BrowserWindow = require('browser-window'); 

// Add Chrome DevTools extension for debugging 
require('remote').require('browser-window').addDevToolsExtension('../react-devtools') 

Đó là cách cấu trúc dự án của tôi trông giống như:

- react-devtools 
- src 
    -- index.html 
    -- main.js 
- package.json 

Mọi trợ giúp sẽ được đánh giá cao. Cảm ơn!

Answer 1

Rất có thể, Electron không thể hiểu đường dẫn đến thư mục ứng dụng bạn đã cung cấp. Bạn phải cung cấp đường dẫn tương đối hoặc tuyệt đối cho thư mục ứng dụng chứa package.json trong đó. Ví dụ, nếu package.json tập tin của ứng dụng của bạn được đặt tại /home/user/my_awesome_app/package.json sau đó để bắt đầu ứng dụng, bạn phải dùng lệnh sau:

electron /home/user/my_awesome_app 

Cũng lưu ý rằng main tài sản trong package.json tập tin chỉ ra điểm mấu chốt cho ứng dụng của bạn. Trong trường hợp của bạn, nó phải như thế này:

"main": "src/main.js" 

Answer 2

Tên của thư mục là tên của thư mục chứa tất cả cây của ứng dụng của bạn. Vì vậy, để thực thi bạn phải viết, trong trường hợp thư mục của bạn được đặt tên là Electron chẳng hạn;

electron Electron

Luôn nhắc nhở đường dẫn thư mục của bạn nằm. Hy vọng sự trợ giúp này.

(Xin lỗi vì gỉ tiếng anh, nhỏ của tôi có thể)

Answer 3

Vì vậy, sau khi bạn đã yêu cầu sau đây:

var app = require('app'); 

Bạn có thể sử dụng đoạn mã sau (tôi sử dụng nó trong ứng dụng của tôi):

app.commandLine.appendSwitch('remote-debugging-port', '8315'); 
app.commandLine.appendSwitch('host-rules', 'MAP * 127.0.0.1'); 

Truy cập vào địa chỉ sau đây cho phép tôi để gỡ lỗi các ứng dụng trong Chrome:

http://127.0.0.1:8315 

Tôi hy vọng điều này sẽ giúp bạn. Tôi cũng mới với Electron!

Nếu bạn cũng cần thực hiện một số cấu hình cho công cụ trình duyệt cơ bản, vui lòng tham khảo the docs.

Answer 4

Có lẽ tôi hiểu lầm, nhưng bạn chỉ có thể làm ctrl + shift + I để kéo lên các công cụ dev.

Hoặc cách khác nếu bạn muốn thực hiện theo cách lập trình, cách tôi thực hiện nó bao gồm các dòng sau trong tệp main.js của tôi được chuyển tới điện tử.

var app = require('app'); 
var BrowserWindows = require('browser-window'); 

app.on('ready', function(){ 
    mainWindow = new BrowserWindow({width:800, height:600}); 
    mainWindow.webContents.openDevTools(); 
} 

Tôi tin rằng một phần vấn đề của bạn có thể là bạn không đợi ứng dụng sẵn sàng trước khi bạn cố gắng thực hiện.

Answer 5

bạn có thể mở công cụ dev như thế này:

mainWindow = new BrowserWindow({ width: 1024, height: 768 }); 
mainWindow.loadURL('your url'); 
mainWindow.webContents.openDevTools(); 
mainWindow.webContents.on('devtools-opened',() => { 
    setImmediate(() => { 
     // do whatever you want to do after dev tool completely opened here 
     mainWindow.focus(); 
    }); 
}); 

Answer 6

Mở ứng dụng điện tử của bạn, bấm vào (xem/chuyển đổi công cụ phát triển).