microsoft / language-server-protocol-inspector Goto Github PK

For working with the tsserver log.
I've set "typescript.tsserver.log":"verbose" copied the resulting log and it results in "No Matching Message"

microsoft/vscode#52866

Repo
Try clicking to expand and then collapse an entry. Do this relatively quickly and without moving the mouse. I do this when I just want to peek at the response

Bug
This ends up selecting the text of the title:

From @octref on June 7, 2018 18:46

Goals

• Offer good overview / glance value of what's happening over the protocol
  • Params should be collapsed
• Offer easy search / filtering
  • Partial text match for filtering. For example, typing comp should single out all the completion request / responses
  • Be able to filter by language features, for example
    • completion / completion resolve
    • code lens / code lens resolve
    • formatting / range formatting / on type formatting

Technical

• This should be a web app that's possible to run stand-alone or in VS Code Webview
• This inspector should take two kinds of input
  1. A complete JSON log, which the LanguageClient should write to the output channel if [language-server-id].trace.server is set to json. This allows copy-pasting of a complete log into the visualizer.
  2. JSON Stream. This allows an external data source to send JSON logs continuously to the Inspector, which transforms the JSON event into a visualized DOM element and append to the end.

/cc @dbaeumer

Copied from original issue: octref/lsp-inspector#3

microsoft/vscode#52866

Feature request
Allow dragging and dropping a log file anywhere on the inspector page to start inspecting it. Currently it seems you can only drop the file on the file input tag

microsoft/vscode#52866

Bug
As far as I can tell, you currently have to use the mouse to navigate through messages. Consider adding some way to navigate and expand/collapse the messages using keyboard navigation

From microsoft/vscode#52971.

For some reason, Travis cannot find this repo.

• Fix travis
• CI badge

When streaming into the inspector via websocket, the inspector silently fails to show the streamed content, if multiple jsonrpc messages (separated by "\r\n") are contained in one websocket message.

The reason for this is that line breaks are ignored when streaming.

This is inconsistent with the documentation in the README.

From @octref on June 12, 2018 23:57

Copied from original issue: octref/lsp-inspector#6

microsoft/vscode#52866

Feature request
Add hover text to the message type icons in the inspector:

The meaning of these icons is already documented on the usage page. We should also show this information inline if possible

I tried to generate a log file based on the Log Format in README.md. But when I try to upload the sample I only get "No Matching Message".

Would appreciate any details.

test.log

From @tboby on June 25, 2018 15:36

Hi, just saw this go live. Hope this is the right place for feedback.

It seems that this tool doesn't support CRLF line endings. It throws a JSON parsing error.

VM2150:7 Uncaught SyntaxError: Unexpected token [ in JSON at position 65
    at JSON.parse (<anonymous>)
    at be (app.695a9541.js:formatted:26621)
    at app.695a9541.js:formatted:26603
    at Array.forEach (<anonymous>)
    at pe (app.695a9541.js:formatted:26602)
    at h.updateLog (app.695a9541.js:formatted:26692)
    at chunk-vendors.a8885d66.js:12
    at chunk-vendors.a8885d66.js:12
    at Array.forEach (<anonymous>)
    at chunk-vendors.a8885d66.js:12

Same file, different line endings:
crlf.log
lf.log

Copied from original issue: octref/lsp-inspector#11

In order evaluate language server it would be useful, if the time is shown with millisecond instead of second precision in the speech bubbles that represent jsonrpc messages.

Currently, if we have a file that's huge, the filtering and searching will be slow. Also highlighting will delay, as microsoft/vscode#53023 illustrates.

json.log.zip

I'd like to use the inspector for clients that are not VSCode. So my client should generate logs in the right format. However, the expected format from the inspector isn't specified.

From @octref on June 18, 2018 7:54

Add one more tab to https://microsoft.github.io/language-server-protocol/ that hosts this app.

Copied from original issue: octref/lsp-inspector#9

Would it be possible to support the Debug Adapter Protocol too?

I've tried the project out and was unable to make it work out of the box for LSP logs from VSCode. Tried both with verbose and JSON logs, there is always an error during parsing.

My issue is possibly fixed by one of the open PRs but they seem to be lingering there for months.

Are there plans to continue working on this project?

Currently query is only against language feature name. We should add search for message parameters too.

microsoft/vscode#52866

Repo

1. Try tabbing through LSP inspector page
2. Try reaching to filter-bar entries (such as Workspace or Text)

Bug
I was not able to reach the entries in filter-bar using keyboard navigation. I believe these elements should be <button> instead of <span> or set the proper aria attributes

From @octref on June 12, 2018 23:57

Currently the web app has a way to load log files. However, it would be nice if it can connect to a data source (using websocket?) and let LSP logs be appended to the visualization as they happen.

Copied from original issue: octref/lsp-inspector#5

I created a log from the JSON language with "json.trace.server": "verbose". Most nodes I can expand/collapse to see the text content, but there are vscode/content messages, expanding one of these hangs the browser.

I guess these are maybe huge - I'm not sure what the vscode/content message represents - but if the message text is too big to render, maybe some kind of truncation would be better?

Gist of the log I uploaded is here (large) https://gist.github.com/nwolverson/b28b74a23a151a3efa03b4827110d578

From @octref on June 18, 2018 7:50

Specify a JSON format which the Inspector could load.
Stay close to the original LSP JSON format, but add useful fields such as timestamp.

Copied from original issue: octref/lsp-inspector#7

From @octref on June 7, 2018 18:55

The logs are good for end-to-end testing purposes. For example, if the log looks like that:

initialize
initialized
didOpen
didChange
textdocument/Completion
response for textdocument/Completion

It would be great if we can

• Use the inspector to look at the log
• Save everything except response for textdocument/Completion as a JSON
• Save response for textdocument/Completion as a JSON
• Have a library that can "play back" the first 5 steps and make assertions on the response

Copied from original issue: octref/lsp-inspector#4

The JSON log format sample doesn't appear to work.

Steps:

1. Copy provided example into file
2. Replace \r\n with actual carriage return and newlines
3. Upload log to viewer

Expected: It shows the two messages
Actual: It says "No Matching Message"

Similarly in VS Code (1.41.1) it wouldn't accept {"format": "JSON"} as a value for "css.trace.server", only "off", "messages", or "verbose". It seems as if JSON support has not been implemented yet, or that it was removed at some point.

microsoft/vscode#52866

Repo

1. Open https://microsoft.github.io/language-server-protocol/inspector/
2. Shrink window width down so that navigation bar uses hamburger button
3. Try clicking hamburger button

Bug
No effect. The 🍔 seems to be disabled

microsoft/vscode#52866

Repo

1. Click Browse
2. Select a .png file

Bug
No warnings or errors shown. Consider adding an error message for this case.

Maybe also use the accept field on the <input> to prevent users from selecting image files in the first place

https://microsoft.github.io/language-server-protocol/inspector/. is dead

From @octref on June 6, 2018 18:4

• Move it out as a Vue web app
• Use websockets from extension to stream channel content to web app
• Can also run it in webview (webview seems to support WebSocket), but later if LSP SDK offers custom tracer this wouldn't be needed

Copied from original issue: octref/lsp-inspector#2

There should be a way to load a file containing the same data as the Websocket stream. Currently (as of 1.27.1) Websocket stream expects json format, while file upload expects text format, making the two incompatible.

I work on the Microsoft C++ extension for VSCode and would like to use this for visualizing my logs. I currently have the capability to export all communication between VSCode and the language server as a JSON array, but when I tried to upload my file and view it in the visualizer it failed. If you could document the format you expect to see, perhaps I could modify my output to match. Or if you could support reading in a JSON array, that would be nice too.

Thanks.

From @octref on June 4, 2018 9:29

Motivation:

• Looking at the raw source do not provide certain insights into the behavior of LSP
• Users have hard time extract useful information from LSP communication and provide that to LSP authors. For example, in this issue the user can only describe the behavior of VS Code. If user's able to provide the data in the LSP, it would be much easier to understand what's going wrong.

Use cases:

• Teaching users about LSP (Online playground. Left side is monaco, right side is LSP inspector)
• Extract information from LSP for issue reporting. Let's say an user is having issue running a code action is TypeScript. With the info from LSP inspector, users can give exactly the request/response args in the issue report and make it easier for LS author to debug.
• Possibly tie to testing together with (https://github.com/octref/vscode-language-server-e2e-test). The inspector could record the LSP communication and generate test cases, for example:
  • LSP inspector records a request and response combo of textDocument/completion
  • Response should contain 1 more item
  • Extension author generates a test case and manually add the missing CompletionItem to the response JSON
  • Extension author now has one more end-to-end test covering the completion case

Current Implementation:

• Requires modification on language client but not language server.
• However, if VS Code provides a way to listen/inspect channel contents, or a centralized place to listen to all LSP logs, this inspector could run without any modification to any client/server.

The UI can be improved, but this just serves as a basis for continued discussion.

Copied from original issue: octref/lsp-inspector#1

From @egamma on June 19, 2018 14:36

@octref the attached file does not open in the inspector

tslint-log.txt

The format looks OK to me. The tool should at least show the error to the user.

Copied from original issue: octref/lsp-inspector#10

My messages from the server don't seem to appear in the inspector:

If I add some logging when we send data over the websocket, like this:

appendLine(value: string) {
	log += value;
	if (socket && socket.readyState === WebSocket.OPEN) {
		socket.send(log);
		console.log(`Sending ${log} to WebSocket`);
	}
	log = "";
},

It does show in the console:

Sending [LSP   - 12:30:27 PM] {"isLSPMessage":true,"type":"send-request","message":{ // SNIP  // to WebSocket
Sending [LSP   - 12:30:35 PM] {"isLSPMessage":true,"type":"receive-response","message":{"id":0,"result":{"capabilities":{"hoverProvider":true}},"jsonrpc":"2.0"},"timestamp":1540380635661} to WebSocket
Sending [LSP   - 12:30:35 PM] {"isLSPMessage":true,"type":"send-notification","message":{"jsonrpc":"2.0","method":"initialized","params":{}},"timestamp":1540380635661} to WebSocket

There are some errors in the dev tools, not sure if they're related:

microsoft/vscode#52866

Add a link to the github source of the inspector to the LSP website's inspector pages

From @octref on June 18, 2018 7:53

Allow an object literal to be passed to [langId].trace.server, like

{
  "format": "json" | "text",
  "verbosity": "off" | "messages" | "verbose",
  "output": "channel" | "log" | "websocket"
}

And make sure the JSON output can be digested by the format in #7.

Copied from original issue: octref/lsp-inspector#8

microsoft/vscode#52866

Repo

1. Expand a message entry.
2. Try clicking to collapse it again

Bug
To collapse an entry, you have to click on the title again. I found this somewhat non-obvious. Perhaps add a collapse triangle icon that is also clickable? Or allow the entire header of the entry to be clicked instead of just the title?

microsoft/vscode#52866

Repo

1. Hover over a non-expanded message entry.
2. Click in far corners of the entry

Bug
This does not expand it even though the hover highlight suggests that the entire element is clickable. You have to click on the title itself to expand the entry

Repo

1. Open inspector on a small screen

Bug
There is no padding around the page contents so some of them are right up against the edge of the screen:

microsoft/vscode#52866

Feature request
Add syntax highlighting for the json content in the entries

In jsonLogParser, the HEADER_LENGTH is set to 21:

And the it resolves string after header:

But the header length is not always 21 because the header contains current time, which changes as system language changes.

I'm using a workaround to resolve the header myself, but I hope it can be fixed.

' '.repeat(21) + log.replace(/^\[LSP[^\]]+\]\s*/, '')

Thanks.

microsoft/vscode#52866

Repo

1. In the search box, enter text that filters out all results

Feature Request
Instead of showing nothing, add some text that explains no results found or similar.