@ -0,0 +1,588 @@ | |||
\input texinfo @c -*-texinfo-*- | |||
@c %**start of header | |||
@setfilename Indium.info | |||
@documentencoding UTF-8 | |||
@ifinfo | |||
@*Generated by Sphinx 1.5.5.@* | |||
@end ifinfo | |||
@settitle Indium Documentation | |||
@defindex ge | |||
@paragraphindent 0 | |||
@exampleindent 4 | |||
@finalout | |||
@dircategory Emacs | |||
@direntry | |||
* Indium: (Indium.info). JavaScript development environment for Emacs. | |||
@end direntry | |||
@definfoenclose strong,`,' | |||
@definfoenclose emph,`,' | |||
@c %**end of header | |||
@copying | |||
@quotation | |||
Indium 0.3.3, Apr 12, 2017 | |||
Nicolas Petton | |||
Copyright @copyright{} 2017, Nicolas Petton | |||
@end quotation | |||
@end copying | |||
@titlepage | |||
@title Indium Documentation | |||
@insertcopying | |||
@end titlepage | |||
@contents | |||
@c %** start of user preamble | |||
@c %** end of user preamble | |||
@ifnottex | |||
@node Top | |||
@top Indium Documentation | |||
@insertcopying | |||
@end ifnottex | |||
@c %**start of body | |||
@anchor{index doc}@anchor{0} | |||
@c Indium documentation master file, created by | |||
@c sphinx-quickstart on Tue Apr 4 11:48:03 2017. | |||
@c You can adapt this file completely to your liking, but it should at least | |||
@c contain the root `toctree` directive. | |||
Indium is a JavaScript development environment for Emacs@footnote{http://gnu.org/software/emacs}. | |||
Indium connects to a browser tab or nodejs process and provides several features | |||
for JavaScript development, including: | |||
@itemize * | |||
@item | |||
a REPL (with auto completion) & object inspection; | |||
@item | |||
an inspector, with history and navigation; | |||
@item | |||
a scratch buffer (@code{M-x indium-scratch}); | |||
@item | |||
JavaScript evaluation in JS buffers with @code{indium-interaction-mode}; | |||
@item | |||
a stepping Debugger, similar to @code{edebug}, or @code{cider}. | |||
@end itemize | |||
This documentation can be read online at @indicateurl{https://indium.readthedocs.io}. | |||
It is also available in Info format and be consulted from within Emacs with | |||
@code{C-h i m indium RET}. | |||
@menu | |||
* Table of contents:: | |||
* Indices and tables:: | |||
@detailmenu | |||
--- The Detailed Node Listing --- | |||
Table of contents | |||
* Installation:: | |||
* Getting up and running:: | |||
* The REPL:: | |||
* Interaction in JS buffers:: | |||
* The stepping debugger:: | |||
* The inspector:: | |||
Installation | |||
* Using MELPA:: | |||
* Manual installation:: | |||
Getting up and running | |||
* NodeJS:: | |||
* Chrome/Chromium:: | |||
* Using local files when debugging:: | |||
The REPL | |||
* Starting a REPL:: | |||
* Using the REPL:: | |||
* Code evaluation & context:: | |||
Using the REPL | |||
* Keybindings:: | |||
* Reconnecting from the REPL buffer:: | |||
Interaction in JS buffers | |||
* Evaluating and inspecting:: | |||
* Switching to the REPL buffer:: | |||
* Adding and removing breakpoints:: | |||
@end detailmenu | |||
@end menu | |||
@node Table of contents,Indices and tables,Top,Top | |||
@anchor{index table-of-contents}@anchor{1}@anchor{index indium}@anchor{2} | |||
@chapter Table of contents | |||
@menu | |||
* Installation:: | |||
* Getting up and running:: | |||
* The REPL:: | |||
* Interaction in JS buffers:: | |||
* The stepping debugger:: | |||
* The inspector:: | |||
@end menu | |||
@node Installation,Getting up and running,,Table of contents | |||
@anchor{installation doc}@anchor{3}@anchor{installation installation}@anchor{4} | |||
@section Installation | |||
Indium supports @code{Emacs 25.1+}, @code{Chrome 54.0+} (debugging protocol @code{v1.2}) | |||
and @code{NodeJS 7+}. | |||
Indium is availabe on MELPA@footnote{https://melpa.org}, MELPA Stable@footnote{https://stable.melpa/org}. | |||
@menu | |||
* Using MELPA:: | |||
* Manual installation:: | |||
@end menu | |||
@node Using MELPA,Manual installation,,Installation | |||
@anchor{installation using-melpa}@anchor{5} | |||
@subsection Using MELPA | |||
Unless you are already using MELPA, you will have to setup @code{package.el} to use | |||
MELPA or MELPA Stable repositories. You can follow this documentation@footnote{https://melpa.org/#/getting-started}. | |||
You can install Indium with the following command: | |||
@example | |||
M-x package-install [RET] indium [RET] | |||
@end example | |||
or by adding this bit of Emacs Lisp code to your Emacs initialization file | |||
(@code{.emacs} or @code{init.el}): | |||
@example | |||
(unless (package-installed-p 'indium) | |||
(package-install 'indium)) | |||
@end example | |||
If the installation doesn't work try refreshing the package list: | |||
@example | |||
M-x package-refresh-contents [RET] | |||
@end example | |||
@node Manual installation,,Using MELPA,Installation | |||
@anchor{installation manual-installation}@anchor{6} | |||
@subsection Manual installation | |||
If you want to install Indium manually, make sure to install @code{websocket.el}. | |||
Obtain the code of Indium from the repository@footnote{https://github.com/NicolasPetton/indium}. | |||
Add the following to your Emacs configuration: | |||
@example | |||
;; load Indium from its source code | |||
(add-to-list 'load-path "~/projects/indium") | |||
(require 'indium) | |||
@end example | |||
@node Getting up and running,The REPL,Installation,Table of contents | |||
@anchor{setup doc}@anchor{7}@anchor{setup up-and-running}@anchor{8}@anchor{setup getting-up-and-running}@anchor{9} | |||
@section Getting up and running | |||
@menu | |||
* NodeJS:: | |||
* Chrome/Chromium:: | |||
* Using local files when debugging:: | |||
@end menu | |||
@node NodeJS,Chrome/Chromium,,Getting up and running | |||
@anchor{setup id1}@anchor{a}@anchor{setup nodejs}@anchor{b} | |||
@subsection NodeJS | |||
Nodejs >= @code{7.0} is required for Indium to work. | |||
Start a node process with the @code{--inspect} flag: | |||
@example | |||
node --inspect myfile.js | |||
@end example | |||
If you wish to break on the first line of the application code, start node using: | |||
@example | |||
node --inspect --debug-brk myfile.js | |||
@end example | |||
Node will tell you to open an URL in Chrome: | |||
@example | |||
chrome-devtools://inspector.html?...&ws=127.0.0.1:PORT/PATH | |||
@end example | |||
Evaluate @code{M-x indium-connect-to-nodejs RET 127.0.0.1 RET PORT RET PATH}, | |||
@code{PORT} and @code{PATH} are the ones from the @cite{ws} parameter of the above URL. | |||
Connecting Indium to the node process will open a debugger on the first line of | |||
the application code if you passed the CLI argument @code{--debug-brk}. | |||
@node Chrome/Chromium,Using local files when debugging,NodeJS,Getting up and running | |||
@anchor{setup chrome-chromium}@anchor{c}@anchor{setup chrome}@anchor{d} | |||
@subsection Chrome/Chromium | |||
Chrome/Chromium >= @code{54.0} is required for Indium to properly work (debugging | |||
protocol @code{v1.2}). | |||
Start Chrome/Chromium with the @code{--remote-debugging-port} flag like the following: | |||
@example | |||
chromium --remote-debugging-port=9222 https://localhost:3000 | |||
@end example | |||
Make sure that no instance of Chrome is already running, otherwise Chrome will | |||
simply open a new tab on the existing Chrome instance, and the | |||
@code{remote-debugging-port} will not be set. | |||
To connect to a tab, run from Emacs: | |||
@example | |||
M-x indium-connect-to-chrome | |||
@end example | |||
@node Using local files when debugging,,Chrome/Chromium,Getting up and running | |||
@anchor{setup local-files}@anchor{e}@anchor{setup using-local-files-when-debugging}@anchor{f} | |||
@subsection Using local files when debugging | |||
Indium can use local files when debugging, or to set breakpoints. | |||
@cartouche | |||
@quotation Hint | |||
When using @code{NodeJS}, or when the connected tab uses the @code{file://} | |||
URL, Indium will by itself use local files from disk. In this case | |||
there is nothing to setup. | |||
@end quotation | |||
@end cartouche | |||
If the Chrome connection uses the @code{http://} or @code{https://} protocol, you will | |||
have to tell Indium where to find the corresponding JavaScript files on disk by | |||
setting up a workspace. | |||
To do that, place an empty @code{.indium} marker file in the root folder where your | |||
@strong{web server serves static files}. | |||
The @code{.indium} file should not always be placed in the directory that contains | |||
your JavaScript files. It has to be in the root folder containing static | |||
files. Most of the time, it is at least one level above. | |||
Given the following project structure: | |||
@example | |||
project/ (current directory) | |||
www/ | |||
index.html | |||
css/ | |||
style.css | |||
js/ | |||
app.js | |||
.indium | |||
@end example | |||
Indium will lookup the file @code{www/js/app.js} for the URL | |||
"@indicateurl{http://localhost:3000/js/app.js}". | |||
@cartouche | |||
@quotation Warning | |||
In order for this setup to work, make sure to call | |||
@code{indium-connect-to-chrome} from somewhere within the workspace | |||
directory! | |||
@end quotation | |||
@end cartouche | |||
@node The REPL,Interaction in JS buffers,Getting up and running,Table of contents | |||
@anchor{repl doc}@anchor{10}@anchor{repl the-repl}@anchor{11}@anchor{repl repl}@anchor{12} | |||
@section The REPL | |||
@menu | |||
* Starting a REPL:: | |||
* Using the REPL:: | |||
* Code evaluation & context:: | |||
@end menu | |||
@node Starting a REPL,Using the REPL,,The REPL | |||
@anchor{repl starting-a-repl}@anchor{13} | |||
@subsection Starting a REPL | |||
A REPL (Read Eval Print Loop) buffer is automatically open when a new Indium | |||
connection is made (see @ref{8,,Getting up and running}). | |||
@image{repl,,,,png} | |||
The REPL offers the following features: | |||
@itemize * | |||
@item | |||
Auto completion with @code{company-mode} | |||
@item | |||
JS syntax highlighting | |||
@item | |||
Pretty printing and preview of printed values | |||
@item | |||
Access to the object inspector | |||
@end itemize | |||
@image{repl2,,,,png} | |||
@node Using the REPL,Code evaluation & context,Starting a REPL,The REPL | |||
@anchor{repl using-the-repl}@anchor{14} | |||
@subsection Using the REPL | |||
@menu | |||
* Keybindings:: | |||
* Reconnecting from the REPL buffer:: | |||
@end menu | |||
@node Keybindings,Reconnecting from the REPL buffer,,Using the REPL | |||
@anchor{repl keybindings}@anchor{15} | |||
@subsubsection Keybindings | |||
Here is the list of available keybindings in a REPL buffer: | |||
@multitable {xxxxxxxxxxxxxxx} {xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx} | |||
@headitem | |||
Keybinding | |||
@tab | |||
Description | |||
@item | |||
@code{RET} | |||
@tab | |||
Evalute the current input. When the point is on a printed object, inspect the object. | |||
@item | |||
@code{C-RET} | |||
@tab | |||
Insert a newline. | |||
@item | |||
@code{C-c M-i} | |||
@tab | |||
Evalute the current input and open an inspector on the result. | |||
@item | |||
@code{C-c C-o} | |||
@tab | |||
Clear the output. | |||
@item | |||
@code{C-c C-q} | |||
@tab | |||
Kill the REPL buffer and close the current connection. | |||
@item | |||
@code{M-n} | |||
@tab | |||
Insert the previous input in the history. | |||
@item | |||
@code{M-p} | |||
@tab | |||
Instert the next input in the history. | |||
@end multitable | |||
@node Reconnecting from the REPL buffer,,Keybindings,Using the REPL | |||
@anchor{repl reconnecting-from-the-repl-buffer}@anchor{16} | |||
@subsubsection Reconnecting from the REPL buffer | |||
When a connection is closed (most probably because other devtools were open on | |||
the same runtime), the REPL will display two buttons, one to try to reopen the | |||
connection, and another one to kill Emacs buffers using this connection (the | |||
REPL buffer, inspectors & debuggers). | |||
@node Code evaluation & context,,Using the REPL,The REPL | |||
@anchor{repl code-evaluation-context}@anchor{17} | |||
@subsection Code evaluation & context | |||
When evaluating code in the REPL, Indium will always run the code on the current | |||
execution context. | |||
This means that while debugging, code execution will happen in the context of | |||
the current stack frame, and will be able to access local variables from the | |||
stack, etc. | |||
@node Interaction in JS buffers,The stepping debugger,The REPL,Table of contents | |||
@anchor{code-evaluation doc}@anchor{18}@anchor{code-evaluation interaction-in-js-buffers}@anchor{19} | |||
@section Interaction in JS buffers | |||
Indium comes with a minor mode called @code{indium-interaction-mode} for interactive | |||
programming. To enable it in all JavaScript buffers, add something | |||
like the following to your Emacs configuration: | |||
@example | |||
(require 'indium) | |||
(add-hook 'js-mode-hook #'indium-interaction-mode) | |||
@end example | |||
When @code{indium-interaction-mode} is on, you can evaluate code, inspect objects and | |||
add or remove breakpoints from your buffers. | |||
@menu | |||
* Evaluating and inspecting:: | |||
* Switching to the REPL buffer:: | |||
* Adding and removing breakpoints:: | |||
@end menu | |||
@node Evaluating and inspecting,Switching to the REPL buffer,,Interaction in JS buffers | |||
@anchor{code-evaluation evaluating-and-inspecting}@anchor{1a} | |||
@subsection Evaluating and inspecting | |||
To evaluate the JavaScript expression preceding the point, press @code{C-x C-e}. | |||
To inspect the result of an expression, press @code{C-c M-i} (see @ref{1b,,The inspector}). | |||
The entire buffer can be evaluating with @code{M-x indium-eval-buffer}. | |||
@node Switching to the REPL buffer,Adding and removing breakpoints,Evaluating and inspecting,Interaction in JS buffers | |||
@anchor{code-evaluation switching-to-the-repl-buffer}@anchor{1c} | |||
@subsection Switching to the REPL buffer | |||
Press @code{C-c C-z} from any buffer with @code{indium-interaction-mode} turned on to | |||
switch back to the REPL buffer (see @ref{12,,The REPL}). | |||
@node Adding and removing breakpoints,,Switching to the REPL buffer,Interaction in JS buffers | |||
@anchor{code-evaluation adding-and-removing-breakpoints}@anchor{1d} | |||
@subsection Adding and removing breakpoints | |||
You need to first make sure that Indium is set up correctly to use local files | |||
(see @ref{e,,Using local files when debugging}). | |||
@itemize - | |||
@item | |||
@code{C-c b b}: Toggle a breakpoint | |||
@item | |||
@code{C-u C-c b b}: Toggle a breakpoint with condition | |||
@item | |||
@code{C-c b K}: Remove all breakpoints from the current buffer | |||
@end itemize | |||
Once a breakpoint is set, execution will stop when a breakpoint is hit, and the | |||
Indium debugger pop up (see @ref{1e,,The stepping debugger}). | |||
@cartouche | |||
@quotation Note | |||
Breakpoints are persistent: if the connection is closed, when a new | |||
connection is made Indium will attempt to add back all breakpoints. | |||
@end quotation | |||
@end cartouche | |||
@cartouche | |||
@quotation Warning | |||
When modifying JavaScript buffers, it is up to the user to update | |||
the browser tab. Indium will attempt to update breakpoint locations | |||
when saving a buffer, but the runtime script contents won't be | |||
updated automatically. You can either refresh the page or evaluate | |||
@code{indium-reload}. | |||
@end quotation | |||
@end cartouche | |||
@node The stepping debugger,The inspector,Interaction in JS buffers,Table of contents | |||
@anchor{debugger doc}@anchor{1f}@anchor{debugger the-stepping-debugger}@anchor{20}@anchor{debugger debugger}@anchor{1e} | |||
@section The stepping debugger | |||
@node The inspector,,The stepping debugger,Table of contents | |||
@anchor{inspector doc}@anchor{21}@anchor{inspector the-inspector}@anchor{22}@anchor{inspector inspector}@anchor{1b} | |||
@section The inspector | |||
@node Indices and tables,,Table of contents,Top | |||
@anchor{index indices-and-tables}@anchor{23} | |||
@chapter Indices and tables | |||
@itemize * | |||
@item | |||
genindex | |||
@item | |||
modindex | |||
@item | |||
search | |||
@end itemize | |||
@c %**end of body | |||
@bye |
@ -1,392 +0,0 @@ | |||
\input texinfo @c -*-texinfo-*- | |||
@c %**start of header | |||
@setfilename Jade.info | |||
@documentencoding UTF-8 | |||
@ifinfo | |||
@*Generated by Sphinx 1.5.5.@* | |||
@end ifinfo | |||
@settitle Jade Documentation | |||
@defindex ge | |||
@paragraphindent 0 | |||
@exampleindent 4 | |||
@finalout | |||
@dircategory Emacs | |||
@direntry | |||
* Jade: (Jade.info). JavaScript development environment for Emacs. | |||
@end direntry | |||
@definfoenclose strong,`,' | |||
@definfoenclose emph,`,' | |||
@c %**end of header | |||
@copying | |||
@quotation | |||
Jade 0.3.3, Apr 06, 2017 | |||
Nicolas Petton | |||
Copyright @copyright{} 2017, Nicolas Petton | |||
@end quotation | |||
@end copying | |||
@titlepage | |||
@title Jade Documentation | |||
@insertcopying | |||
@end titlepage | |||
@contents | |||
@c %** start of user preamble | |||
@c %** end of user preamble | |||
@ifnottex | |||
@node Top | |||
@top Jade Documentation | |||
@insertcopying | |||
@end ifnottex | |||
@c %**start of body | |||
@anchor{index doc}@anchor{0} | |||
@c Jade documentation master file, created by | |||
@c sphinx-quickstart on Tue Apr 4 11:48:03 2017. | |||
@c You can adapt this file completely to your liking, but it should at least | |||
@c contain the root `toctree` directive. | |||
Jade is a JavaScript development environment for Emacs@footnote{http://gnu.org/software/emacs}. | |||
Jade connects to a browser tab or nodejs process and provides several features | |||
for JavaScript development, including: | |||
@itemize * | |||
@item | |||
a REPL (with auto completion) & object inspection; | |||
@item | |||
an inspector, with history and navigation; | |||
@item | |||
a scratch buffer (@code{M-x jade-scratch}); | |||
@item | |||
JavaScript evaluation in JS buffers with @code{jade-interaction-mode}; | |||
@item | |||
a stepping Debugger, similar to @code{edebug}, or @code{cider}. | |||
@end itemize | |||
@menu | |||
* Table of contents:: | |||
* Indices and tables:: | |||
@detailmenu | |||
--- The Detailed Node Listing --- | |||
Table of contents | |||
* Installation:: | |||
* Getting up and running:: | |||
* Interaction in JS buffers:: | |||
Installation | |||
* Using MELPA:: | |||
* Manual installation:: | |||
Getting up and running | |||
* NodeJS:: | |||
* Chrome/Chromium:: | |||
* Using local files when debugging:: | |||
Interaction in JS buffers | |||
* Evaluating and inspecting:: | |||
* Switching to the REPL buffer:: | |||
* Adding and removing breakpoints:: | |||
@end detailmenu | |||
@end menu | |||
@node Table of contents,Indices and tables,Top,Top | |||
@anchor{index welcome-to-jade-s-documentation}@anchor{1}@anchor{index table-of-contents}@anchor{2} | |||
@chapter Table of contents | |||
@menu | |||
* Installation:: | |||
* Getting up and running:: | |||
* Interaction in JS buffers:: | |||
@end menu | |||
@node Installation,Getting up and running,,Table of contents | |||
@anchor{installation installation}@anchor{3}@anchor{installation doc}@anchor{4} | |||
@section Installation | |||
Jade supports @code{Emacs 25.1+}, @code{Chrome 54.0+} (debugging protocol @code{v1.2}) | |||
and @code{NodeJS 7+}. | |||
Jade is availabe on MELPA@footnote{https://melpa.org}, MELPA Stable@footnote{https://stable.melpa/org}. | |||
@menu | |||
* Using MELPA:: | |||
* Manual installation:: | |||
@end menu | |||
@node Using MELPA,Manual installation,,Installation | |||
@anchor{installation using-melpa}@anchor{5} | |||
@subsection Using MELPA | |||
Unless you are already using MELPA, you will have to setup @code{package.el} to use | |||
MELPA or MELPA Stable repositories. You can follow this documentation@footnote{https://melpa.org/#/getting-started}. | |||
You can install Jade with the following command: | |||
@example | |||
M-x package-install [RET] jade [RET] | |||
@end example | |||
or by adding this bit of Emacs Lisp code to your Emacs initialization file | |||
(@code{.emacs} or @code{init.el}): | |||
@example | |||
(unless (package-installed-p 'jade) | |||
(package-install 'jade)) | |||
@end example | |||
If the installation doesn't work try refreshing the package list: | |||
@example | |||
M-x package-refresh-contents [RET] | |||
@end example | |||
@node Manual installation,,Using MELPA,Installation | |||
@anchor{installation manual-installation}@anchor{6} | |||
@subsection Manual installation | |||
If you want to install Jade manually, make sure to install @code{websocket.el}. | |||
Obtain the code of Jade from the repository@footnote{https://github.com/NicolasPetton/jade}. | |||
Add the following to your Emacs configuration: | |||
@example | |||
;; load Jade from its source code | |||
(add-to-list 'load-path "~/projects/jade") | |||
(require 'jade) | |||
@end example | |||
@node Getting up and running,Interaction in JS buffers,Installation,Table of contents | |||
@anchor{setup doc}@anchor{7}@anchor{setup getting-up-and-running}@anchor{8}@anchor{setup up-and-running}@anchor{9} | |||
@section Getting up and running | |||
@menu | |||
* NodeJS:: | |||
* Chrome/Chromium:: | |||
* Using local files when debugging:: | |||
@end menu | |||
@node NodeJS,Chrome/Chromium,,Getting up and running | |||
@anchor{setup id1}@anchor{a}@anchor{setup nodejs}@anchor{b} | |||
@subsection NodeJS | |||
Nodejs >= @code{7.0} is required for Jade to work. | |||
Start a node process with the @code{--inspect} flag: | |||
@example | |||
node --inspect myfile.js | |||
@end example | |||
If you wish to break on the first line of the application code, start node using: | |||
@example | |||
node --inspect --debug-brk myfile.js | |||
@end example | |||
Node will tell you to open an URL in Chrome: | |||
@example | |||
chrome-devtools://inspector.html?...&ws=127.0.0.1:PORT/PATH | |||
@end example | |||
Evaluate @code{M-x jade-connect-to-nodejs RET 127.0.0.1 RET PORT RET PATH}, | |||
@code{PORT} and @code{PATH} are the ones from the @cite{ws} parameter of the above URL. | |||
Connecting Jade to the node process will open a debugger on the first line of | |||
the application code if you passed the CLI argument @code{--debug-brk}. | |||
@node Chrome/Chromium,Using local files when debugging,NodeJS,Getting up and running | |||
@anchor{setup chrome}@anchor{c}@anchor{setup chrome-chromium}@anchor{d} | |||
@subsection Chrome/Chromium | |||
Chrome/Chromium >= @code{54.0} is required for Jade to properly work (debugging | |||
protocol @code{v1.2}). | |||
Start Chrome/Chromium with the @code{--remote-debugging-port} flag like the following: | |||
@example | |||
chromium --remote-debugging-port=9222 https://localhost:3000 | |||
@end example | |||
Make sure that no instance of Chrome is already running, otherwise Chrome will | |||
simply open a new tab on the existing Chrome instance, and the | |||
@code{remote-debugging-port} will not be set. | |||
To connect to a tab, run from Emacs: | |||
@example | |||
M-x jade-connect-to-chrome | |||
@end example | |||
@node Using local files when debugging,,Chrome/Chromium,Getting up and running | |||
@anchor{setup local-files}@anchor{e}@anchor{setup using-local-files-when-debugging}@anchor{f} | |||
@subsection Using local files when debugging | |||
Jade can use local files when debugging, or to set breakpoints. | |||
@cartouche | |||
@quotation Hint | |||
When using @code{NodeJS}, or when the connected tab uses the @code{file://} | |||
URL, Jade will by itself use local files from disk. In this case | |||
there is nothing to setup. | |||
@end quotation | |||
@end cartouche | |||
If the Chrome connection uses the @code{http://} or @code{https://} protocol, you will | |||
have to tell Jade where to find the corresponding JavaScript files on disk by | |||
setting up a workspace. | |||
To do that, place an empty @code{.jade} marker file in the root folder where your | |||
@strong{web server serves static files}. | |||
The @code{.jade} file should not always be placed in the directory that contains | |||
your JavaScript files. It has to be in the root folder containing static | |||
files. Most of the time, it is at least one level above. | |||
Given the following project structure: | |||
@example | |||
project/ (current directory) | |||
www/ | |||
index.html | |||
css/ | |||
style.css | |||
js/ | |||
app.js | |||
.jade | |||
@end example | |||
Jade will lookup the file @code{www/js/app.js} for the URL | |||
"@indicateurl{http://localhost:3000/js/app.js}". | |||
@cartouche | |||
@quotation Danger | |||
In order for this setup to work, make sure to call | |||
@code{jade-connect-to-chrome} from somewhere within the workspace | |||
directory! | |||
@end quotation | |||
@end cartouche | |||
@node Interaction in JS buffers,,Getting up and running,Table of contents | |||
@anchor{code-evaluation doc}@anchor{10}@anchor{code-evaluation interaction-in-js-buffers}@anchor{11} | |||
@section Interaction in JS buffers | |||
Jade comes with a minor mode called @code{jade-interaction-mode} for interactive | |||
programming. To enable it in all JavaScript buffers, add something | |||
like the following to your Emacs configuration: | |||
@example | |||
(require 'jade) | |||
(add-hook 'js-mode-hook #'jade-interaction-mode) | |||
@end example | |||
When @code{jade-interaction-mode} is on, you can evaluate code, inspect objects and | |||
add or remove breakpoints from your buffers. | |||
@menu | |||
* Evaluating and inspecting:: | |||
* Switching to the REPL buffer:: | |||
* Adding and removing breakpoints:: | |||
@end menu | |||
@node Evaluating and inspecting,Switching to the REPL buffer,,Interaction in JS buffers | |||
@anchor{code-evaluation evaluating-and-inspecting}@anchor{12} | |||
@subsection Evaluating and inspecting | |||
To evaluate the JavaScript expression preceding the point, press @code{C-x C-e}. | |||
To inspect the result of an expression, press @code{C-x M-i}. | |||
The entire buffer can be evaluating with @code{M-x jade-eval-buffer}. | |||
@node Switching to the REPL buffer,Adding and removing breakpoints,Evaluating and inspecting,Interaction in JS buffers | |||
@anchor{code-evaluation switching-to-the-repl-buffer}@anchor{13} | |||
@subsection Switching to the REPL buffer | |||
Press @code{C-c C-z} from any buffer with @code{jade-interaction-mode} turned on to | |||
switch back to the REPL buffer. | |||
@node Adding and removing breakpoints,,Switching to the REPL buffer,Interaction in JS buffers | |||
@anchor{code-evaluation adding-and-removing-breakpoints}@anchor{14} | |||
@subsection Adding and removing breakpoints | |||
You need to first make sure that Jade is set up correctly to use local files | |||
(see @ref{e,,Using local files when debugging}). | |||
@itemize - | |||
@item | |||
@code{C-c b b}: Toggle a breakpoint | |||
@item | |||
@code{C-u C-c b b}: Toggle a breakpoint with condition | |||
@item | |||
@code{C-c b K}: Remove all breakpoints from the current buffer | |||
@end itemize | |||
@cartouche | |||
@quotation Note | |||
Breakpoints are persistent: if the connection is closed, when a new | |||
connection is made Jade will attempt to add back all breakpoints. | |||
@end quotation | |||
@end cartouche | |||
@node Indices and tables,,Table of contents,Top | |||
@anchor{index indices-and-tables}@anchor{15} | |||
@chapter Indices and tables | |||
@itemize * | |||
@item | |||
genindex | |||
@item | |||
modindex | |||
@item | |||
search | |||
@end itemize | |||
@c %**end of body | |||
@bye |
@ -0,0 +1,89 @@ | |||
<?xml version="1.0" encoding="UTF-8" standalone="no"?> | |||
<!-- Created with Inkscape (http://www.inkscape.org/) --> | |||
<svg | |||
xmlns:dc="http://purl.org/dc/elements/1.1/" | |||
xmlns:cc="http://creativecommons.org/ns#" | |||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" | |||
xmlns:svg="http://www.w3.org/2000/svg" | |||
xmlns="http://www.w3.org/2000/svg" | |||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" | |||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" | |||
width="256px" | |||
height="256px" | |||
viewBox="0 0 256 256" | |||
version="1.1" | |||
id="SVGRoot" | |||
inkscape:version="0.92.1 r" | |||
sodipodi:docname="inlium.svg" | |||
inkscape:export-filename="/home/nico/indium.png" | |||
inkscape:export-xdpi="245.07495" | |||
inkscape:export-ydpi="245.07495"> | |||
<sodipodi:namedview | |||
id="base" | |||
pagecolor="#ffffff" | |||
bordercolor="#666666" | |||
borderopacity="1.0" | |||
inkscape:pageopacity="0.0" | |||
inkscape:pageshadow="2" | |||
inkscape:zoom="1.63" | |||
inkscape:cx="235.15359" | |||
inkscape:cy="98.37298" | |||
inkscape:document-units="px" | |||
inkscape:current-layer="layer1" | |||
showgrid="false" | |||
inkscape:window-width="1315" | |||
inkscape:window-height="713" | |||
inkscape:window-x="51" | |||
inkscape:window-y="27" | |||
inkscape:window-maximized="1" | |||
inkscape:grid-bbox="true" /> | |||
<defs | |||
id="defs4485" /> | |||
<metadata | |||
id="metadata4488"> | |||
<rdf:RDF> | |||
<cc:Work | |||
rdf:about=""> | |||
<dc:format>image/svg+xml</dc:format> | |||
<dc:type | |||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> | |||
<dc:title></dc:title> | |||
</cc:Work> | |||
</rdf:RDF> | |||
</metadata> | |||
<g | |||
id="layer1" | |||
inkscape:groupmode="layer" | |||
inkscape:label="Layer 1"> | |||
<rect | |||
style="fill:#ff6a5e;fill-opacity:1;stroke:#cb595f;stroke-width:7.55905533;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" | |||
id="rect5044" | |||
width="193" | |||
height="193" | |||
x="31.5" | |||
y="31.5" | |||
ry="0" /> | |||
<text | |||
xml:space="preserve" | |||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" | |||
x="69.46875" | |||
y="191.884" | |||
id="text5048"><tspan | |||
sodipodi:role="line" | |||
id="tspan5046" | |||
x="69.46875" | |||
y="191.884" | |||
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:133.33332825px;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans Bold';fill:#ffffff;fill-opacity:1">In</tspan></text> | |||
<text | |||
xml:space="preserve" | |||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" | |||
x="113.49693" | |||
y="62.134968" | |||
id="text5071"><tspan | |||
sodipodi:role="line" | |||
id="tspan5069" | |||
x="113.49693" | |||
y="97.525589" /></text> | |||
</g> | |||
</svg> |
@ -0,0 +1,135 @@ | |||
;;; indium-debugger-frames.el --- List the stack frame -*- lexical-binding: t; -*- | |||
;; Copyright (C) 2017 Nicolas Petton | |||
;; Author: Nicolas Petton <nicolas@petton.fr> | |||
;; This program is free software; you can redistribute it and/or modify | |||
;; it under the terms of the GNU General Public License as published by | |||
;; the Free Software Foundation, either version 3 of the License, or | |||
;; (at your option) any later version. | |||
;; This program is distributed in the hope that it will be useful, | |||
;; but WITHOUT ANY WARRANTY; without even the implied warranty of | |||
;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | |||
;; GNU General Public License for more details. | |||
;; You should have received a copy of the GNU General Public License | |||
;; along with this program. If not, see <http://www.gnu.org/licenses/>. | |||
;;; Commentary: | |||
;; | |||
;;; Code: | |||
(require 'indium-render) | |||
(declare 'indium-debugger-frames) | |||
(declare 'indium-debugger-current-frame) | |||
(declare 'indium-debugger-select-frame) | |||
(defun indium-debugger-stack-frames () | |||
"List the stack frames in a separate buffer and switch to it." | |||
(interactive) | |||
(let ((buf (indium-debugger-frames-get-buffer-create)) | |||
(frames (indium-debugger-frames)) | |||
(current-frame (indium-debugger-current-frame)) | |||
(inhibit-read-only t)) | |||
(with-current-buffer buf | |||
(indium-debugger-frames-list frames current-frame)) | |||
(switch-to-buffer buf))) | |||
(defun indium-debugger-frames-maybe-refresh () | |||
"When a buffer listing the stack frames is open, refresh it." | |||
(interactive) | |||
(let ((buf (indium-debugger-frames-get-buffer)) | |||
(frames (indium-debugger-frames)) | |||
(current-frame (indium-debugger-current-frame)) | |||
(inhibit-read-only t)) | |||
(when buf | |||
(with-current-buffer buf | |||
(indium-debugger-frames-list frames current-frame))))) | |||
(defun indium-debugger-frames-list (frames &optional current-frame) | |||
"Render the list of stack frames FRAMES. | |||
CURRENT-FRAME is the current stack frame in the debugger." | |||
(save-excursion | |||
(erase-buffer) | |||
(indium-render-header "Debugger stack") | |||
(newline 2) | |||
(seq-doseq (frame frames) | |||
(indium-render-frame frame | |||
(indium-backend-get-script-url (indium-backend) frame) | |||
(eq current-frame frame)) | |||
(newline)))) | |||
(defun indium-debugger-frames-select-frame (frame) | |||
"Select FRAME and switch to the corresponding debugger buffer." | |||
(interactive) | |||
(indium-debugger-select-frame frame)) | |||
(defun indium-debugger-frames-next-frame () | |||
"Go to the next frame in the stack." | |||
(interactive) | |||
(indium-debugger-frames-goto-next 'next)) | |||
(defun indium-debugger-frames-previous-frame () | |||
"Go to the previos frame in the stack." | |||
(interactive) | |||
(indium-debugger-frames-goto-next 'previous)) | |||
(defun indium-debugger-frames-goto-next (direction) | |||
"Go to the next frame in DIRECTION." | |||
(let ((next (eq direction 'next))) | |||
(forward-line (if next 1 -1)) | |||
(back-to-indentation) | |||
(while (and (not (if next | |||
(eobp) | |||
(bobp))) | |||
(not (get-text-property (point) 'indium-action))) | |||
(forward-char (if next 1 -1))))) | |||
(defun indium-debugger-frames-get-buffer () | |||
"Return the buffer listing frames for the current connection. | |||
If no buffer is found, return nil." | |||
(get-buffer (indium-debugger-frames-buffer-name))) | |||
(defun indium-debugger-frames-buffer-name () | |||
"Return the name of the frames buffer for the current connection." | |||
"*JS Frames*") | |||
(defun indium-debugger-frames-get-buffer-create () | |||
"Create a buffer for listing frames unless one exists, and return it." | |||
(let ((buf (indium-debugger-frames-get-buffer))) | |||
(unless buf | |||
(setq buf (generate-new-buffer (indium-debugger-frames-buffer-name))) | |||
(indium-debugger-frames-setup-buffer buf)) | |||
buf)) | |||
(defun indium-debugger-frames-setup-buffer (buffer) | |||
"Setup the frames BUFFER." | |||
(with-current-buffer buffer | |||
(indium-debugger-frames-mode) | |||
(setq-local truncate-lines nil))) | |||
(defvar indium-debugger-frames-mode-map | |||
(let ((map (make-sparse-keymap))) | |||
(define-key map [return] #'indium-follow-link) | |||
(define-key map (kbd "C-m") #'indium-follow-link) | |||
(define-key map (kbd "n") #'indium-debugger-frames-next-frame) | |||
(define-key map (kbd "p") #'indium-debugger-frames-previous-frame) | |||
(define-key map [tab] #'indium-debugger-frames-next-frame) | |||
(define-key map [backtab] #'indium-debugger-frames-previous-frame) | |||
map)) | |||
(define-derived-mode indium-debugger-frames-mode special-mode "Frames" | |||
"Major mode visualizind and navigating the JS stack. | |||
\\{indium-debugger-frames--mode-map}" | |||
(setq buffer-read-only t) | |||
(font-lock-ensure) | |||
(read-only-mode)) | |||
(provide 'indium-debugger-frames) | |||
;;; indium-debugger-frames.el ends here |