I am building a Parity UI dApp from the Skeleton dApp at https://github.com/paritytech/skeleton

and I want to debug it with Facebook's react-devtools

Since Parity renders the dApp in an iframe, I can't see it with the Chrome extension, so I installed the standalone Electron version.

So I added a line to the dApp's HTML to source a script for the dev tools:

--- a/dist/index.html
+++ b/dist/index.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="us">
+        <script src=""></script>
        <meta charset="utf-8">
        <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

and I hacked the Content Security Policy in handlers/mod.rs in Parity's web server, to persuade Chrome to load a script from react_devtools. I re-compiled Parity:

--- a/dapps/src/handlers/mod.rs
+++ b/dapps/src/handlers/mod.rs
@@ -67,7 +67,7 @@ pub fn add_security_headers(headers: &mut header::Headers, embeddable_on: Embedd
                // Allow fonts from data: and HTTPS.
                b"font-src 'self' data: https:;".to_vec(),
                // Allow inline scripts and scripts eval (webpack/jsconsole)
-               b"script-src 'self' 'unsafe-inline' 'unsafe-eval';".to_vec(),
+               b"script-src 'self' http: 'unsafe-inline' 'unsafe-eval';".to_vec(),
                // Restrict everything else to the same origin.
                b"default-src 'self';".to_vec(),
                // Run in sandbox mode (although it's not fully safe since we allow same-origin and script)

Now the react-devtools main pane shows:

Waiting for roots to load...

to reload the inspector [click here]

How do I get the tool to display my React components?

Versions: I compiled parity from the master branch, Chrome is 59.0.3071.115 (Official Build) (64-bit), and react-devtools is 2.5.0 as far as I can tell.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.