Added logging with configurable levels to make debugging easier.

This commit is contained in:
n1474335 2017-12-28 18:17:38 +00:00
parent 124ff83206
commit d079420d46
17 changed files with 88 additions and 18 deletions

View file

@ -91,7 +91,7 @@ App.prototype.loaded = function() {
* @param {boolean} [logToConsole=false]
*/
App.prototype.handleError = function(err, logToConsole) {
if (logToConsole) console.error(err);
if (logToConsole) log.error(err);
const msg = err.displayStr || err.toString();
this.alert(msg, "danger", this.options.errorTimeout, !this.options.showErrors);
};
@ -129,6 +129,7 @@ App.prototype.autoBake = function() {
if (this.autoBakePause) return false;
if (this.autoBake_ && !this.baking) {
log.debug("Auto-baking");
this.bake();
} else {
this.manager.controls.showStaleIndicator();
@ -569,7 +570,7 @@ App.prototype.isLocalStorageAvailable = function() {
App.prototype.alert = function(str, style, timeout, silent) {
const time = new Date();
console.log("[" + time.toLocaleString() + "] " + str);
log.info("[" + time.toLocaleString() + "] " + str);
if (silent) return;
style = style || "danger";

View file

@ -215,6 +215,7 @@ InputWaiter.prototype.handleLoaderMessage = function(e) {
}
if (r.hasOwnProperty("fileBuffer")) {
log.debug("Input file loaded");
this.fileBuffer = r.fileBuffer;
window.dispatchEvent(this.manager.statechange);
}

View file

@ -58,7 +58,7 @@ const Manager = function(app) {
this.ops = new OperationsWaiter(this.app, this);
this.input = new InputWaiter(this.app, this);
this.output = new OutputWaiter(this.app, this);
this.options = new OptionsWaiter(this.app);
this.options = new OptionsWaiter(this.app, this);
this.highlighter = new HighlighterWaiter(this.app, this);
this.seasonal = new SeasonalWaiter(this.app, this);
this.bindings = new BindingsWaiter(this.app, this);
@ -172,6 +172,7 @@ Manager.prototype.initialiseEventListeners = function() {
this.addDynamicListener(".option-item input[type=number]", "change", this.options.numberChange, this.options);
this.addDynamicListener(".option-item select", "change", this.options.selectChange, this.options);
document.getElementById("theme").addEventListener("change", this.options.themeChange.bind(this.options));
document.getElementById("logLevel").addEventListener("change", this.options.logLevelChange.bind(this.options));
// Misc
window.addEventListener("keydown", this.bindings.parseInput.bind(this.bindings));

View file

@ -8,8 +8,9 @@
* @constructor
* @param {App} app - The main view object for CyberChef.
*/
const OptionsWaiter = function(app) {
const OptionsWaiter = function(app, manager) {
this.app = app;
this.manager = manager;
};
@ -86,6 +87,7 @@ OptionsWaiter.prototype.switchChange = function(e, state) {
const el = e.target;
const option = el.getAttribute("option");
log.debug(`Setting ${option} to ${state}`);
this.app.options[option] = state;
if (this.app.isLocalStorageAvailable())
@ -102,8 +104,10 @@ OptionsWaiter.prototype.switchChange = function(e, state) {
OptionsWaiter.prototype.numberChange = function(e) {
const el = e.target;
const option = el.getAttribute("option");
const val = parseInt(el.value, 10);
this.app.options[option] = parseInt(el.value, 10);
log.debug(`Setting ${option} to ${val}`);
this.app.options[option] = val;
if (this.app.isLocalStorageAvailable())
localStorage.setItem("options", JSON.stringify(this.app.options));
@ -120,6 +124,7 @@ OptionsWaiter.prototype.selectChange = function(e) {
const el = e.target;
const option = el.getAttribute("option");
log.debug(`Setting ${option} to ${el.value}`);
this.app.options[option] = el.value;
if (this.app.isLocalStorageAvailable())
@ -149,6 +154,8 @@ OptionsWaiter.prototype.setWordWrap = function() {
/**
* Changes the theme by setting the class of the <html> element.
*
* @param {Event} e
*/
OptionsWaiter.prototype.themeChange = function (e) {
const themeClass = e.target.value;
@ -156,4 +163,17 @@ OptionsWaiter.prototype.themeChange = function (e) {
document.querySelector(":root").className = themeClass;
};
/**
* Changes the console logging level.
*
* @param {Event} e
*/
OptionsWaiter.prototype.logLevelChange = function (e) {
const level = e.target.value;
log.info("Setting log level to " + level);
log.setLevel(level, false);
this.manager.worker.setLogLevel();
};
export default OptionsWaiter;

View file

@ -41,6 +41,7 @@ OutputWaiter.prototype.get = function() {
* @param {boolean} [preserveBuffer=false] - Whether to preserve the dishBuffer
*/
OutputWaiter.prototype.set = function(data, type, duration, preserveBuffer) {
log.debug("Output type: " + type);
const outputText = document.getElementById("output-text");
const outputHtml = document.getElementById("output-html");
const outputFile = document.getElementById("output-file");
@ -73,7 +74,7 @@ OutputWaiter.prototype.set = function(data, type, duration, preserveBuffer) {
try {
eval(scriptElements[i].innerHTML); // eslint-disable-line no-eval
} catch (err) {
console.error(err);
log.error(err);
}
}
break;

View file

@ -21,8 +21,10 @@ const WorkerWaiter = function(app, manager) {
* Sets up the ChefWorker and associated listeners.
*/
WorkerWaiter.prototype.registerChefWorker = function() {
log.debug("Registering new ChefWorker");
this.chefWorker = new ChefWorker();
this.chefWorker.addEventListener("message", this.handleChefMessage.bind(this));
this.setLogLevel();
let docURL = document.location.href.split(/[#?]/)[0];
const index = docURL.lastIndexOf("/");
@ -40,6 +42,8 @@ WorkerWaiter.prototype.registerChefWorker = function() {
*/
WorkerWaiter.prototype.handleChefMessage = function(e) {
const r = e.data;
log.debug("Receiving '" + r.action + "' from ChefWorker");
switch (r.action) {
case "bakeSuccess":
this.bakingComplete(r.data);
@ -58,6 +62,7 @@ WorkerWaiter.prototype.handleChefMessage = function(e) {
this.manager.output.setStatusMsg(r.data);
break;
case "optionUpdate":
log.debug(`Setting ${r.data.option} to ${r.data.value}`);
this.app.options[r.data.option] = r.data.value;
break;
case "setRegisters":
@ -67,7 +72,7 @@ WorkerWaiter.prototype.handleChefMessage = function(e) {
this.manager.highlighter.displayHighlights(r.data.pos, r.data.direction);
break;
default:
console.error("Unrecognised message from ChefWorker", e);
log.error("Unrecognised message from ChefWorker", e);
break;
}
};
@ -145,7 +150,7 @@ WorkerWaiter.prototype.bake = function(input, recipeConfig, options, progress, s
* Asks the ChefWorker to run a silent bake, forcing the browser to load and cache all the relevant
* JavaScript code needed to do a real bake.
*
* @param {Objectp[]} [recipeConfig]
* @param {Object[]} [recipeConfig]
*/
WorkerWaiter.prototype.silentBake = function(recipeConfig) {
this.chefWorker.postMessage({
@ -178,4 +183,19 @@ WorkerWaiter.prototype.highlight = function(recipeConfig, direction, pos) {
};
/**
* Sets the console log level in the worker.
*
* @param {string} level
*/
WorkerWaiter.prototype.setLogLevel = function(level) {
if (!this.chefWorker) return;
this.chefWorker.postMessage({
action: "setLogLevel",
data: log.getLevel()
});
};
export default WorkerWaiter;

View file

@ -372,6 +372,17 @@
<input type="number" option="outputFileThreshold" id="outputFileThreshold" />
<label for="outputFileThreshold"> Size threshold for treating the output as a file (KiB)</label>
</div>
<div class="option-item">
<select option="logLevel" id="logLevel">
<option value="silent">Silent</option>
<option value="error">Error</option>
<option value="warn">Warn</option>
<option value="info">Info</option>
<option value="debug">Debug</option>
<option value="trace">Trace</option>
</select>
<label for="logLevel"> Console logging level</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="reset-options">Reset options to default</button>

View file

@ -47,7 +47,8 @@ function main() {
attemptHighlight: true,
theme: "classic",
useMetaKey: false,
outputFileThreshold: 1024
outputFileThreshold: 1024,
logLevel: "info"
};
document.removeEventListener("DOMContentLoaded", main, false);
@ -55,9 +56,6 @@ function main() {
window.app.setup();
}
// Fix issues with browsers that don't support console.log()
window.console = console || {log: function() {}, error: function() {}};
window.compileTime = moment.tz(COMPILE_TIME, "DD/MM/YYYY HH:mm:ss z", "UTC").valueOf();
window.compileMessage = COMPILE_MSG;