(Previously reported, but issue closed without resolution)

Debug tools fail to start with error

SEC7118: XMLHttpRequest for http://localhost:1337/socket.io/?EIO=3&transport=polling&t=1430700342685-0 required Cross Origin Resource Sharing (CORS).
File: 2

or

"WebSocket connection to 'ws://./' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED" [Chrome]

(IE Message, Chrome message respectfully)

Notes on deployment

• All on same machine, straight install, default settings, first test.
• Added the script line to the top of an existing HTML file in HEAD, before modernizr (with all other JS loaded through require.js in BODY)
• Windows 8.1

Notes on debugging

• Commented out my own modernizr (no difference)
• Tried running vorlon "console" in both IE and Chrom (no difference)
• Tried using IP address and "localhost" (no difference).

Full reports:

DOM711: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
File: 2
HTML1300: Navigation occurred.
File: 2
Started
SEC7118: XMLHttpRequest for http://localhost:1337/socket.io/?EIO=3&transport=polling&t=1430700955790-0 required Cross Origin Resource Sharing (CORS).
File: 2
SEC7118: XMLHttpRequest for http://localhost:1337/socket.io/?EIO=3&transport=polling&t=1430700955791-1 required Cross Origin Resource Sharing (CORS).
File: 2
Start client
SCRIPT5022: SecurityError
File: vorlon.js, Line: 3, Column: 5164
SCRIPT5022: SecurityError
File: vorlon.js, Line: 3, Column: 5164
app started

[IE]

Started
Start client
'webkitAudioContext' is deprecated. Please use 'AudioContext' instead.
'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.
'webkitURL' is deprecated. Please use 'URL' instead.
WebSocket connection to 'ws://./' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED
app started
Uncaught TypeError: Cannot read property 'length' of null

[Chrome]

innerText is an old, proprietary DOM property that is not supported by most modern browsers. We should be using textContent instead, but is it a problem if it is only compatible down to IE9? The added benefit of textContent is that it does not cause a style recalc like innerText does, which is better for perf.

@deltakosh I have a commit to switch these properties that works and makes the client list text appear again in Firefox, etc., but I need to know about our compat targets before pushing it out to DX master.

For some reason, I had to go to /plugins and manually call a gulp

SecurityError: The operation is insecure.
...),t.refresh()})},r.prototype._getElementByInternalId=function(e,t){if(t.__intern...
vorlon.js (line 4)

http://recordit.co/nL4QzAOy4j

I have everything in place to switch from the Mutation events that are causing performance issues and crashes as a result of their DOM recomputation in DOM Explorer, but it appears all calls to Plugin functions are blocked from being called inside event listeners via some kind of pseudo-CSP.

Here's what I am doing: I created a refresh event that bubbles from within a Plugin's UI and is handled at the top level of the Plugin via a listener on the top-most Plugin element. This raises a SecurityError in the console, and reports "The operation is insecure".

Is there something being done to the base Plugin class that prevents calls to functions like refresh? If so, I can't figure out why, because there are valid cases where you want to call Plugin functions in response to Plugin-originating events.

@deltakosh @davrous If you have any guidance on this issue let me know, right now I am blocked from fixing issues #49, #41, and #74.

In playing with the dashboard and thinking about the render of plugins, I would like to submit for consideration the idea of instantiating plugins inside their own light text/html document within an <object> element. This would provide the following for plugin authors:

• Encapsulation for styles and script
• Media queries scoped to the size of the panel's container, not the entire parent window
• Would make development and packaging of a plugin even easier

Note: code within a light document inside an <object> element still has access to the parent frame and v. v., so we can still do any necessary cross document manipulation without worrying about cross domain issues.

I get this message:

warn: API : No client in session default type=API, session=default
info: DASHBOARD : New Dashboard with session id : default type=DASHBOARD, session=default
info: DASHBOARD : No client selected for this dashboad on this session : default type=DASHBOARD, session=default
info: DASHBOARD : Received identify for sessionid : default type=DASHBOARD, session=default
error: DASHBOARD : No client for sessionid : default type=DASHBOARD, session=default

As soon as I connect to the client via the dashboard the entire client application starts lagging and crashes after a few seconds. By crashing I mean that the session is not usable anymore due to a huge CPU overload. Is there any way to turn off the server -> client communication through the dashboard? I only need to receive log messages from the client without being able to send console commands from the server.

Occurs in IE console.

The "node" in question is an SVG element with no children*.

Creating a pull request fix for you (although it's a one-liner, probably easier to do yourself).

Line 897 (vorlon.max.js).

    DOMExplorer.prototype._getElementByInternalId = function (internalId, node) {
        if (node.__internalId === internalId) {
            return node;
        }
        for (var index = 0; index < node.children.length; index++) {   <<< HERE
            var result = this._getElementByInternalId(internalId, node.children[index]);
            if (result) {
                return result;
            }
        }
        return null;
    };

• Why? Part of a build process is that we build multiple SVGs in one, then inline display them. Currently there are none in the project, but there will be, so the code is needed.

(And to answer other question, it's a bit complex to share the project: it's unreleased client work. Not ideal, but I'm good with testing for you. I presume this is fixed with a simple

Everytime I add Vorlon.js on my page, it crashes the browser.

• Galaxy Nexus
• Android 4.3
• Android Browser

How to start the client VorlonJS only when the user want. For example, first referencing the vorlon.js file, and later execute "VORLON.Core.Start" when the user clicks on a button in this web page?

I have this code

<img style="-webkit-transform: rotateY(270deg) translateX(165px);" src="images/img4.jpg" id="Face4" name="Face4" width="768px" height="928px"alt="">

Explorer shows just this

<img id="Face4">
</img>

Is there a way to tweak it to shows all

In Dashboard the newly added CSS properties are not persistent to the session,Click of the same element not showing the newly added properties always its showing the computed styles.

When I change an elements styles using the CSS pane in DOM Explorer, the styles get applied correctly. But if I change to another element and then back again, the style editor shows the original styles instead of the modified styles.

The modified styles do persist on the actual element. But if I come back to a changed element and click inside a value I modified before and don't change it but just press enter, then the original value will be applied to the element again.

It would be great :)

Is there any authentication mechanism for the dashboard? As the documentation does not provide any documentation regarding to security stuff I just took a quick look into the sources and noticed that the npm module passport is required. Is this really used now?

When I add Vorlon.js on my webpage, when everything is loaded, Google Chrome freezes and I can't do anything. I can't even refresh the webpage. I have to close and create another tab.

• Android 4.3
• Chrome Dev 44.0.2403.7

I only get this error if I add the vorlonjs script tag to the DOM dynamically via JavaScript. Everything works fine if the script tag is in the page head block from the beginning on.

Il will be nice to support BrowserSync - http://www.browsersync.io/

Get this error on running any vorlon command:

robert $ vorlon -h
env: node\r: No such file or directory

My env: OSx 10.10.2, Node.js version - v0.10.33.

Why i can run it only on 1337? lol really why? How i can to start it on any other port?

We should add a documentation entry for VS users

We could have the console.dir () function to describe a variable and its attributes . For example:

var xyz = {
  x: "Some value",
  y: "Value Some",
  z: "Value Value"
};
console.dir (xyz)

And the result on the console would be:
x -> "Some value",
y -> "Value Some",
z: -> "Value Value"

If I get everything from the repo, how should I launch the server? We need as well to provide a better description of the folders structure

Currently, there doesn't seem to be a way to use this properly with a site in HTTPS. This greatly limits Vorlon.JS' usefulness, as many sites have migrated to using HTTPS everywhere.

Adding HTTPS support would be huge.

I get this error in the chrome console when trying to use vorlon: modernizr.js:4 WebSocket connection to 'ws://./' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED

it also shows Uncaught TypeError: Cannot read property 'length' of null default:797

when i place a breakpoint on that line, I can see that the rules object is in fact not null but what one would expect...

i'm using chrome on a windows 8.1 device.
hosting my application on a WAMP server on <my-ip>:80
I have the vorlon server running on the default port.

I placed the script tag just before i close the body tag( I used max.js for debugging purposes)..

I'm accessing the vorlon dashboard via http://<my-ip>:1337

the vorlon dashboard doesn't show anything in the DOM explorer, the Modernizr plugin only shows the titles and the Console shows start client and seems to do it's job.

Any ideas what the problem might be?

Create a similar experience as the Web Audio Firefox F12 features inside Vorlon.js.

The idea is to create a SVG graph on the dashboard side that will be synchronized with the web audio nodes running on the client side.

It will be helpful to remote debug & test Web Audio on mobile devices.

We should begin to integrate Custom Elements to enhance the plugin development experience, maintain a consistent UI/UX across plugins, and automate some of the common, generic functions that plugins perform (refresh is a great first use-case).

I have an issue with android browser. I load VorlonJS using <script src="http://x.x.x.x:1337/vorlon.js"></script> before my </body>. When I load my page on android browser, the browser crashes when the page has finished loading.

Here are the logs :

{"type":"API","session":"default","level":"warn","message":"   API : No client in session default","timestamp":"2015-05-21T08:18:53.139Z"}
{"type":"DASHBOARD","session":"default","level":"info","message":"   DASHBOARD : New Dashboard with session id : default","timestamp":"2015-05-21T08:18:53.818Z"}
{"type":"DASHBOARD","session":"default","level":"info","message":"   DASHBOARD : No client selected for this dashboad on this session : default","timestamp":"2015-05-21T08:18:53.819Z"}
{"type":"PLUGIN","session":"default","level":"info","message":"   PLUGIN : Send Refresh clientlist to dashboard (0)[Mozilla/5.0 (Linux; U; Android 4.2.2; fr-fr; SM-T110 Build/JDQ39) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30] on sessionid : default socketid = oh4xzKaLhUjmK8seAAAE","timestamp":"2015-05-21T08:19:14.651Z"}
{"type":"PLUGIN","session":"default","level":"info","message":"   PLUGIN : New client (0)[Mozilla/5.0 (Linux; U; Android 4.2.2; fr-fr; SM-T110 Build/JDQ39) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30] on sessionid : default socketid = oh4xzKaLhUjmK8seAAAE","timestamp":"2015-05-21T08:19:14.658Z"}
{"type":"PLUGIN","session":"default","level":"info","message":"   PLUGIN : Number clients in session : 01","timestamp":"2015-05-21T08:19:14.659Z"}
{"type":"PLUGIN","session":"default","level":"info","message":"   PLUGIN : New client (0) wait...","timestamp":"2015-05-21T08:19:14.659Z"}
{"type":"API","session":"default","level":"info","message":"   API : GetClients nb client 1 in session default","timestamp":"2015-05-21T08:19:14.672Z"}
{"type":"PLUGIN","session":"default","level":"info","message":"   PLUGIN : Delete client socket oh4xzKaLhUjmK8seAAAE for session default(default) ","timestamp":"2015-05-21T08:19:23.362Z"}

Android version is 4.2.2, running on a Samsung Galaxy Tab 3 Lite. I don't know how to find Android Browser version.

We should be serializing all attributes, not just a few hard coded ones. Switch to serializing the attributes token list and adding all members in a more generic way.

The code that regulates the hide/show of plugin panels is buggy, it allows the user to tab focus elements in panels that are supposed to be hidden. This bumps the visible panel out of view and causes a strange partial view of both panels.

Steps to reproduce:

• load dashboard
• select remote source
• click on the last tag in the DOM Explorer
• tab through past the last tag

You will see the input in the Object Explorer selected, and it will push the top of the DOM Explorer off the screen.

I connected to test page provided http://cdn.rawgit.com/MicrosoftDX/Vorlonjs/master/Plugins/samples/index.html, and vorlon interface does not expose text in the DOM.

My env: OSx 10.10.2, Nodejs - v0.10.33, Browser Chrome 42/Safari.

Is the tool only optimized for Windows + IE?

Hello, i have installed Vorlon width "npm i -g vorlon" command but when i start the server width "vorlon" command i have the message "vorlon: command not found"

Can you help me ?

Thanks

We set up vorlon in one of our cloud machines. When hitting the JS URL (http://machine-name:1337/vorlon.js) for vorlon.js, the Content-Type in the response header is text/html; charset=utf-8 instead of application/javascript. We followed these simple steps, is there any other setting to change? The full response header is below

Content-Length: 123007
Content-Type: text/html; charset=utf-8
Date: Mon, 04 May 2015 18:27:42 GMT
ETag: W/"MGVQ06MpwAGPgBGP2fyzkg=="
X-Powered-By: Express

It will be really nice to have support for worker.

Despite that the original plugins like dom inspector or modernizr won't make sense, other plugins could be created to interact and debug workers.

Right now I tried by myself with the sample plugin, but it crash againts a dependency with 'document' that in workers is not meet.

I install the package like this: npm install vorlon -g and when i try to run vorlon i get this:
env: node\r: No such file or directory
When i am checking if vorlon is installed by which vorlon command i get this:
/Users/netanelbasal/.nvm/v0.10.35/bin/vorlon
so its seems to be install, what is the problem?

Script file /Server/public/vorlon/vorlon-noplugin.max.js

Line 187: this.loadingDirectory = "Vorlon/plugins", while the directory is actually "vorlon/plugins"

This doesn't seem to cause an issue when running on localhost but when running on a hosted machine, the following files aren't loaded:
vorlon/plugins/domExplorer/control.html
vorlon/plugins/interactiveConsole/control.html
vorlon/plugins/modernizrReport/control.html

Hi,
I had installed vorlon by the instructions in Getting Started, but after I added the <script> tag into the HTML and reload, An exception raised when I reload the page:

Uncaught ReferenceError: io is not defined

I found it's came from this code:

            switch (this._isConnected = !1, this._isConnected = !1, this._sessionId = n, this._clientId = o, e.Core._listenClientId = s, this._serverUrl = r, this._waitingEvents = 0, t) {
                case 0:
                    this._socket = io.connect(r), this._isConnected = !0;
                    break;
                case 1:
                    this._socket = io.connect(r + "/dashboard"), this._isConnected = !0
            }

Seems the variable io is undefined. Any bug in the recent version of vorlonJS?

WebSocket connection to 'ws://./' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED

Hello, awesome project.

I built and run Plunker (http://plnkr.co/edit/) and think that giving users the ability to automatically inject Vorlon into running previews would be very compelling.

To require each user to be running their own Vorlon server would go against the idea of frictionless creation in Plunker.

Can Vorlon be configured for mutli-tennancy (this might be the wrong term)?

Cheers,

Geoff

With a look, I donot know how to bebugger the javascript!

It doesn't seem to work with angular, i just added the script tag but in my angular app i get the following error in the console:
Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide' is not a valid selector.

I'm using Vorlon to inspect a page running in an app webview on Android. The app is running locally in Genymotion. When I select a node, I don't see anything except these strange border styles listed in the CSS panel; sometimes it doesn't show anything at all.

The same behavior occurs if I load up a page in Chrome on the emulator. I can select nodes, console works as expected, but no styles are visible.

Adding new styles in the panel works as expected.

Like the one in objectExplorer