How to analyse console errors in developer tools?


#1

My environment:
Ubuntu 16.04 LTS (64 bit)
Atom 1.34

I notice when using (hacking) Atom that I can see errors in developer tools > console. My question is how to pin down the source of these errors?

When I run atom --safe there are no errors.

My first thoughts are to systematically disable packages (perhaps split them in half) until these errors disappear.

They seem to point to …

/usr/share/atom/resources/app.asar

Is there a recommended procedure to analyse such errors in console? Here is a screenshot:-

atom-dev-tools-screenshot


#2

What do you see when you expand one of the errors?


#3

Further diagnosis …

First when developer tools opens I get this popup …

Next I close this crash message and expand some of the errors …
atom-errors-expanded

Next I click on <embedded> link and I am taken to this display which suggests app.asar should be investigated …

atom-embedded

I guess that my next step must be to expand app.asar …
I have installed asar …

npm install -g asar

Meanwhile I am writing a python script to disable blocks of packages to see if that can isolate the root cause.


#4

I think figuring out which package is causing this will be the most helpful. It looks to me like a JavaScript file is being fed into the parser that handles keymap and config code, and there might be a package with an anomalous structure that has somehow managed to drop its code into one of Atom’s exports. Or that has actual JS code in a .json/.cson file.


#5

It is not easy to find which package is causing these errors.
I tried disabling batches of packages but that is a tedious approach.
Instead I searched for the package which actually generates the text output to console.
In Ubuntu I used SearchMonkey.

I searched throughout ~/.atom for files containing this pattern … Unsupported pseudo-selector: which is seen in each console error item.

~/.atom/packages/autocomplete-python/node_modules/selector-kit/lib/selector.js

Options: only showing first content match. Line Number: 39 _results.push(console.warn("Unsupported pseudo-selector: " + pseudoClass.name));

However I am still none the wiser about the cause of these reports.

This is selector-kit.


#6

I found that searching through files to locate where the console warnings are printed can be just as tedious as disabling packages in a methodical way.

With Atom closed I went to ~/.atom/packages folder and simply dragged out a batch of packages (package names starting with “a” through to “p”) into a temp folder. I then restarted Atom and inspected Console.

No errors seen in console.

Conclusion: One of the moved packages is the cause.

I then moved back packages in sets and retested Atom. Using this process of elimination I found the culprit to be laravel-snippets-5.

Laravel is a framework for PHP development and I had three laravel packages installed.

laravel-forms-bootstrap-snippets
laravel-helper
laravel-snippets-5

I will now try to understand why laravel-snippets-5 prints 21 warnings.

The important lesson I learned is how to locate source of console errors. Console does not point to the source package generating the error message.

p.s. I saw from searching Packages repo that there is also laravel-5-snippets and when that is installed there are no error messages in console.


#7

It’s because laravel-snippets-5 contains bad code. Those selectors match your error messages perfectly.