inline-console v1.0.21
inline-console
An excellent inline console for browsers as React component based on jquery.terminal.
Very useful inline browser console which gives you full access to the JavaScript console and console output in case you do not have access to the developer console, e.g. when testing on browserstack.com in certain mobile browsers. inline-console
uses jquery.terminal under the hood.
For a screenshot see the 'Advanced Example' below.
Installation
Install the inline-console
module via
npm install inline-console --save
or
yarn add inline-console
Usage
The default export of inline-console
is a simple React component. It offers a property named redirect
of type Boolean
to control redirect behavior of console.log
and its siblings. Furthermore you can provide an options and an interpreter property. The component renders a div
element with the CSS class terminal
attached. This div
element gets populated by jquery.terminal
.
Example 1:
import InlineConsole from 'inline-console';
const MyComponent = (props) => (
<div className="inline-console">
<InlineConsole redirect={true}/>
</div>
);
Example 2:
import InlineConsole from 'inline-console';
const MyComponent = (props) => (
<div className="inline-console">
<InlineConsole
redirect={false}
options={{prompt: '>'}}
interpreter={(command) => { alert(command); }}
/>
</div>
);
You need to control the height of the terminal via CSS, to achieve typical terminal behavior. Example:
.inline-console .terminal {
height: 300px;
}
Advanced Example
The following example illustrates a typical pattern I use in my applications.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div id="app"></div>
<div id="inline-console"></div>
</body>
</html>
index.css
...
#inline-console {
display: none;
}
#inline-console .terminal {
height: 300px;
}
...
main.js
...
import InlineConsole from 'inline-console';
import queryString from 'query-string';
const query = queryString.parse(window.location.search);
if( typeof query['inline-console'] !== 'undefined'
&& JSON.parse(query['inline-console'])
) {
const container = document.getElementById('inline-console');
container.style.display = 'block';
render(
<InlineConsole redirect={true}/>,
container
);
}
...