1. Input in Google Chrome: chrome://inspectOpen the developer tools to easily intercept electroninternal requests, or you can use the source breakpoint in the f12 developer tools.
Although elements can also be inspected in the electron client.
PS: But it has limitations. If it is a window with a window (webview), it cannot be debugged. Using delTools that comes with the browser can easily intercept and interrupt debugging
2. You can quickly locate line 321 by typing in the source input box (by ctrl+popening it)“:321”
3. It is hosted by a newly opened form on the electron client webview. The debugging method needs to be in the webview form first, use the shortcut key ctrl+shift+I (windows writing) to open the developer tool, and then find the label in the Elements of webviewf12 , click the left mouse button to select the webview label, and then enter enter in the console $0.openDevTools();to execute, and the developer tool of webview will be opened automatically.
4. Open a webview container hosted by a new form in electron, and cannot communicate with other urls through postMessage. It may be because the permission has not been activated (the white list has not been added)
Attachment: Some problems encountered in implementing auth2 of google and office 365 during project implementation
Background premise: adopt electron+micro-app architecture (JD micro front-end, base application) + sub-application.
1. The micro-app sandbox problem, after the sandbox is turned on, the google auth2 interface cannot be called, and it can be used normally after the sandbox is turned off
2. For third-party requests, carefully handle the addition of request headers to avoid third-party requests failing due to strict security checks
3. The iframe in the desktop and sub-application lacks the host environment for executing jsbridge, and lacks global attributes and data
4. Open the form in the sub-application, but the request still cannot be sent completely, and the Google authentication button implemented by the react-google-login component cannot silently request a successful Google authentication interface
5. Use the request.post encapsulated in the mailbox to request the Google interface. The request cannot be sent, but axios can
6. Use electron to open a form with embedded webview to open the authorization page. The webview authorization page itself cannot be closed inside the webview (because it is a form, but the main application itself does not provide closed api), and it cannot be passed through the protocol. Message (without opening window.open permission), using postMessage to deliver messages can not be monitored in the main application
7. An independent form hosts the webview to implement auth2. It does not need to use the logic related to user authentication in our application, and because all routes will be rendered in the BasicLayout layout component by default, and there are some user acquisition and forms in BasicLayout Tab and other related operations, note that this means that information such as obtaining user information and obtaining form tabs will also be loaded at the same time, but we are just a simple auth2 authentication page and do not need these, so we need to separate the auth2 route When it comes to the top level, it is juxtaposed with the BasicLayout layout component corresponding to the / path, and it is necessary to ensure that the route of auth2 is above the / route. This is to prevent the first level of the route of the auth2 component from being matched by default when / is above. This will As a result, the following auth2 routes at the same level as the / route are no longer matched.
PS: Use the preload method to inject the global method into the window object in the webview during preloading