Merge pull request #15 from Jelmerro/feature/developer-tools

Feature/developer tools

README.md

@@ -50,6 +50,7 @@ but this can be changed as described below in "Configuring Vieb".
 Vieb supports the following commands:
 
 - `:q` or `:quit` will quit Vieb, and is the recommended way to do so
+- `:dev` or `:devtools` open the devtools for the current website in a new window
 - `:r` or `:reload` will reload the settings from the viebrc.json file
 - `:v` or `:version` to display all version and release information
 - `:h` or `:help` to display the help documentation,
@@ -141,7 +142,7 @@ When starting Vieb with npm, it's required to enter the arguments like this:
 
 It should be noted that the developer console is not the one linked to any websites,
 but is the internal console of the Vieb application.
-Opening the developer tools for the current website is not supported yet.
+Opening the developer tools for the current website can be done with the `:dev` command.
 
 # Configuring Vieb
 

app/help.html

@@ -332,6 +332,7 @@ <h1 id="startup">Startup</h1>
     Lastly, you can provide "--debug" or "--console" to open the Vieb debug console,
     which is the internal console of Vieb and not the one used to debug websites.
     Aside from these arguments the remaining ones will be opened as a url.
+    For the website console, see the <a href="#commands-devtools">devtools command</a>.
     These urls can take any form if you include the protocol/schema,
     or will automatically be prefixed with "https://".
     You can provide as many urls as you want,
@@ -463,6 +464,12 @@ <h2 id="commands-version">version</h2>
     It is used to diplay version information about Vieb.
     There are versions listed for Vieb and Chromium,
     and you can also navigate to the github repository from the version page.
+    The version command is also available as "v".
+    <h2 id="commands-devtools">devtools</h2>
+    The devtools command takes no arguments.
+    This command can be used to open to open the developer tools for the current website.
+    The short version of this command is "dev".
+    To open the Vieb developer/debug console, see the <a href="#startup">startup options</a>.
     <h2 id="commands-set">set</h2>
     This command has already been mostly explained in <a href="#settings-set">this paragraph</a>.
     To summarize, this command can be used to set any setting during runtime,

app/js/command.js

@@ -37,7 +37,16 @@ const execute = command => {
         UTIL.notify("The quit command takes no arguments", "warn")
         return
     }
-    //reload command
+    //devtools command
+    if (["dev", "devtools"].indexOf(command) !== -1) {
+        devtools()
+        return
+    }
+    if (command.startsWith("dev ") || command.startsWith("devtools ")) {
+        UTIL.notify("The devtools command takes no arguments", "warn")
+        return
+    }
+    //version command
     if (["r", "reload"].indexOf(command) !== -1) {
         SETTINGS.loadFromDisk()
         return
@@ -46,7 +55,7 @@ const execute = command => {
         UTIL.notify("The reload command takes no arguments", "warn")
         return
     }
-    //reload command
+    //version command
     if (["v", "version"].indexOf(command) !== -1) {
         version()
         return
@@ -90,6 +99,10 @@ const quit = () => {
     remote.app.exit(0)
 }
 
+const devtools = () => {
+    TABS.currentPage().openDevTools()
+}
+
 const version = () => {
     MODES.setMode("normal")
     const versionUrl = url.format({