sokolovstas / sublimewebinspector Goto Github PK

It is unclear how to get this working once the package is installed. Please add a clear series of steps to go from this point to using the package alongside Chrome Canary.

how to select the current tage area

I've tried out the plugin, but removed it afterwards (using Package Control). But somehow the inspector window is still visible:

What kind of view is this, and how can I hide it? I've already tried reinstalling/uninstalling, but I can't seem to get rid of it.

Edit: Whoops, it's just a split pane. My bad..

I keep going back and forth between the chrome debugger and start debugging to inspect elements in chrome. Opening the chrome debugger kicks me out of webinspector, but I can't inspect an element in the web inspector.

It would really be awesome if I could just control inspecting an element from the webinspector.

Installed fresh, pointed the settings for chrome to my canary build (in user package settings) and got this.

I've tried Googling about profile lock and am guessing this is a Chrome thing but unsure of how to go about solving this. Any thoughts?

PS. Thank you for releasing the package, it looks really neat 👯 Good job!

I really like this plugin, but my one issue is that if I want to debug cases where the User Agent is being used to serve a mobile view, my UA override settings in Chrome Dev Tools don't carry over.

Maybe I'm missing the way to set this in the plugin, but it would be nice if I didn't have to stop using the integrated plugin to work on mobile views. Maybe an options panel/menu like the dev tools have to pass through settings to Chrome would be useful.

I have a project I compile with grunt and browserify and the grunt-browserify task adds a base-64 encoded source map to the compiled javascript. Chrome sees the source map and lets me debug the uncompiled files, but swi only maps the compiled file.

Steps to repro locally

• Ensure no instances of Canary are running
• Launch a new instance of Chrome from Sublime - Start Google Chome with remote debug port 9222
• Navigate to a page of your choosing
• Open command palette - select Web Inspector, then Start Debugging
• SWI Console opens
• Open command palette - select Web Inspector, then Stop Debugging
• Close Chrome Canary

Now, reopen the command palette and select Web Inspector

The same Stop Debugging choice is there along with Reload Page, Clear Console and Add/Remove Breakpoint

Only way for me to get the original menu item back with Start Debugging is to kill and restart Sublime.

I finally managed to get this working with Chrome Canary, but breakpoints don't work properly. I am unable to add breakpoints while debugging. I can add them if I stop debugging, but the debugger doesn't break on them.

If I look in my user settings, I see they are disabled:

{
    "breaks":
    {
        "/path/to/file/AppController.js":
        {
            "50":
            {
                "status": "disabled"
            },
            "92":
            {
                "breakpointId": "None",
                "status": "disabled"
            }
        },
        "/path/to/file/AppController.js":
        {
        }
    },
    "chrome_path":
    {
        "osx": "/Applications/GoogleChromeCanary.app/Contents/MacOS/Google Chrome Canary"
    }
}

So how do I enable them?

The subject/title does it :)

Any plans/timeframe on this one?

Trying to run Web Inspector for the first time, I got the following error:

[3413:1799:0325/120842:ERROR:process_singleton_mac.cc(106)] Unable to obtain profile lock.
[3413:35075:0325/120842:ERROR:unix_domain_socket_util.cc(43)] Socket name too long: /Volumes/Secondary - HDD/Users/chetanshenoy/Library/Application Support/Google/Chrome Canary/App Shim Socket
[Finished in 0.2s with exit code 20]

The 'socket name too long' seems like Chromium issue but I'd be interested to know about any quick workarounds.

I'd really love to give this a go, but unfortunately I can't get it up and running on my office PC (Windows XP SP3, Sublime Text 2.0.1, build 2217). I've tried with both Chrome stable (26) and the latest Canary build (28), but with both browsers, can't get past the "Start Google Chrome with remote debug port 9222" message every time I hit Ctrl-Shift-R.

I see the following two messages appear in the console, but believe they're red herrings and not relevant...

[3344:8680:0424/131657:ERROR:gpu_info_collector_win.cc(96)] Can't retrieve a valid WinSAT assessment.
[3344:8680:0424/131702:ERROR:textfield.h(156)] NOT IMPLEMENTED

Chrome seems to start up fine, but the debugging connection never seems to be established as when I go back to ST2 and hit Ctrl-Shift-R, I only get the same "Start Gogle Chrome..." message.

Just to confirm, I've closed down all instances of Chrome prior to launching ST2, and am only starting up Chrome within ST2 via SWI.

Here's a copy of my user preferences file for reference (I've only amended the chrome_path value to point either at Canary or Stable)...

{
"chrome_path": {
"osx": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
"windows": "C:\Program Files\Google\Chrome\Application\chrome.exe",
//"windows": "C:\Documents and Settings\wagstafm\Local Settings\Application Data\Google\Chrome SxS\Application\chrome.exe",
"linux": "/usr/bin/google-chrome"
},
"chrome_profile": "Default",
"chrome_remote_port": "9222",
"breakpoint_scope": "swi.breakpoint",
"current_line_scope": "swi.current",
"interactive_scope": "mcol_0088CCFF.settings",
"stack_layout": {
"cols": [0.0, 0.6, 1.0],
"rows": [0.0, 0.7, 1.0],
"cells": [[0, 0, 2, 1], [0, 1, 1, 2], [1, 1, 2, 2]]
},
"console_layout": {
"cols": [0.0, 0.6, 1.0],
"rows": [0.0, 0.7, 1.0],
"cells": [[0, 0, 2, 1], [0, 1, 1, 2], [1, 1, 2, 2]]
},
"reload_on_start": true,
"reload_on_save": true,
"set_script_source": false,
"open_stack_current_in_new_tab": false,
"pause_on_exceptions": "uncaught",
"breaks": {}
}

Hello,
i installed the app and set the path to chrome in user settings

{
    "chrome_path": {
        "windows": "C:\\Users\\ionutvmi\\AppData\\Local\\Google\\Chrome SxS\\Application\\chrome.exe"
    }
}

But when i try to run it it opens chrome with this url
file:///C:/Users/ionutvmi/AppData/Local/Google/Chrome%20SxS/Application/30.0.1564.0/

any idea on what i'm doing wrong ?

I am running Web Inspector in Sublime Text 2 (2217), Chrome (25.0.1364.172 m), and hosting my application on an ASP.NET Web Development Server on an irregular port (3987).

Web Inspector does not list the localhost site (open in a Chrome tab) in the list of eligible places to attach. It does, however, list a separate internal server correctly.

Steps to reproduce:

1. Open ST2, Install Web Inspector (I also restarted ST2 at this point).
2. Start Web Inspector.
3. Navigate to the localhost-served website.
4. Start Debugging in Web Inspector.
5. Fail to notice the localhost site in the list of eligible sites to debug.

• Open Sublime command palette with Ctrl-Shift-P
• Select Web Inspector with Enter - menu appears with Start Google Chome with remote debug port 9222
• Tab away to another application
• Open Sublime command palette with Ctrl-Shift-P - Web Inspector item is no longer present

The workaround is to hit ESC, then open the command palette again. Web Inspector reappears.

There's a strong preference among Chrome developers that third parties use the chrome.debugger API rather than rely on remote-debugging-port. In fact, there's no current way to enable the HTTP API on ChromeOS.

As such, let's consider moving to an extension so we can support debugging ChromeOS.

Installing the Web Inspector (3) package via the Package Control will bring up an empty Package Controls message window and empty preference files for Web Inspector package.

Installing the package using git clone (and then switching the ST3 branch) did the trick, but whenever I save, the page (both in Canary and in dev) gets reloaded --- not as seen in your screencast, that is.

I would like to know if there is some way to use this plugin with coffeescript. As Ruby developer, i don't compile the source code into javascript until production deployment.

I get the following error message but so far it seems to work nevertheless:

[17512:22840:0628/173703:ERROR:textfield.h(162)] NOT IMPLEMENTED

Hi,

Thanks for the amazing plugin--it has become an irreplaceable part of my workflow. I am running into a small issue using Chrome 27.0.1453.116 on OSX (10.8.3), Sublime Text 2.0.1, Build 2217 and LESSCSS js compiler v1.3.3.

If I start a debugging session and make a change in a normal CSS file, the browser reloads and I see the change reflected immediately, as expected. However, if I make a change in a LESSCSS file it seems like SWI is attempting to reload (I see new messages in the console, and another display bug described below), but the style changes are not reflected.

The other bug I am seeing (and the reason I can tell that the plugin is attempting to reload the page when using LESS) is related to webfonts and Typekit.

My local site uses Typekit to serve fonts--Typekit restricts the domains on which the fonts can display (it is an account setting). I am allow "mysite.local" in my Typekit account, so when developing locally my web fonts work. However, if SWI reloads a page after editing a file, the fonts don't render (I see a 403 forbidden message in the SWI console and the browser switches to showing the fallback websafe fonts). I assume this is because some alternate referrer is being sent. When using SWI I immediately see all my fonts revert to the fallbacks after the first reload (but if I go to the browser and reload they work again). As I mentioned above, I am seeing this behavior happen when saving a LESSCSS file, so the plugin is at least attempting to reload the page, however, the updated LESS styles are not applied.

The path looks not correct: Packages/Web Inspector/swi_log.tmLanguage

This is on startup.

I'm receiving that error in sublime with chrome 25.0.1364.172. I'm using Windows 7.

[5556:7924:0316/221536:ERROR:content_settings_pref_provider.cc(492)] Invalid pattern strings: ,
[5556:7924:0316/221536:ERROR:content_settings_pref_provider.cc(396)] Invalid pattern strings: ,

when evaluating an array of objects, objects are missing a lot of properties.
in chrome web inspector i get this when I expand an object in the array :

id: 514
actual: "0"
actual_mod: null
admin_notes: null
city: null
company_id: null
company_name: null
complete: "1"
credit: "0"
date_modified: null
email: ""

whereas in sublime web inspector window i just get this :

{"injectedScriptId":51,"id":1} -> 0

id: 514
date_modified: 

all of the other properties are missing

In theory Mozilla Remote Debugging protocol could be added to this plugin.

In practice the docs are so bad I'm not sure I could.

https://github.com/jimblandy/DebuggerDocs

https://wiki.mozilla.org/Remote_Debugging_Protocol

https://getfirebug.com/wiki/index.php/Remoting_Architecture

This plugin is awesome already! But wouldn't it be neat if it allow autocompletion too? I don't know if it is even possible, just asking :)

FYI -- Not sure if this tells you anything or not...

[3104:4468:0305/155818:ERROR:textfield.h(162)] NOT IMPLEMENTED

Right now I can't find any way to hide the console for the plugin. Maybe a config option can be added to hide it and show it.

My OS system is window 7 64.And when I run web inspector ,console show:

Executing: C:\Program Files\Google\Chrome\chrome.exe --remote-debugging-port=9222 --profile-directory=Default 

[Error 2] 
[Finished]

but my Chrome is in C:\Program Files(x86) .......
How to config my configration?

I've installed with package manager

I'm running Chrome ok and debug but I get these errors in console and the breakpoint images are broken:

Running C:\Users\username\AppData\Local\Google\Chrome\Application\chrome.exe --remote-debugging-port=9222 --profile-directory=NoExt
Starting SWI
SWI: Creating protocol
SWI: Connecting to ws://127.0.0.1:9222/devtools/page/1
SWI: Thread started
SWI: WebSocket opened
error: Error loading syntax file "Packages/Web Inspector/swi_log.tmLanguage": Error parsing plist xml: Failed to open file In file "Packages/Web Inspector/swi_log.tmLanguage"
reloading /C/Users/username/AppData/Roaming/Sublime Text 2/Packages/User/swi.sublime-settings
error: Error loading syntax file "Packages/Web Inspector/swi_stack.tmLanguage": Error parsing plist xml: Failed to open file In file "Packages/Web Inspector/swi_stack.tmLanguage"
Unable to decode /C/Users/username/AppData/Roaming/Sublime Text 2/Packages/Theme - Default/../Web Inspector/icons/breakpoint_active.png
Unable to decode /C/Users/username/AppData/Roaming/Sublime Text 2/Packages/Theme - Default/../Web Inspector/icons/breakpoint_inactive.png
SWI: WebSocket closed
SWI: Thread stoped

After installing on OS X and running the Web Inspector I get

[79839:1799:0328/000322:ERROR:process_singleton_mac.cc(106)] Unable to obtain profile lock.

After using "Add/Remove breakpoint" nothing happened :(

Ubuntu 12.10
I tried all versions Chrome for linux: stable, beta, dev

I ran the web inspector. It was awesome but when i closed it. Not able to open chrome console back. To close it, i did following stuff which may be the reason.

1. I clicked on the close mark of the console.
2. Changed the layout back to my standard one using Alt+shift + 2.

When i tried to rerun the web inspector, i am not able to view chrome console and other related tabs. I am able to see only sublime console.

I even tried to reinstall web inspector which is of no help.

It may either be a bug or improvement where we should have a command to open chrome console and other things.

The default Chrome path for Linux isn't working.
Maybe it could be improved by writting the following instead (in swi.sublime-settings file) :

"linux": "/opt/google/chrome/google-chrome"

I know this path won't work for everybody, but it will only be better.

To get everything working right it took about 5 seconds on sublime text 2. after confirmation from sublime text 3 alpha package installer, can't seem to get key binding "super+shift+r" to come to life in sublime text 3.

Remove:

I will prepare a plugin to Package Manager after additional testing

As there is already a package available via Package Control.

(With ST2 on OSX 10.7.5) I get the following error everytime I try and start Chrome Canary

[Errno 13] Permission denied
[cmd: [u'/Applications/Google Chrome Canary.app', u'--remote-debugging-port=9222']]

Any ideas?

On your video here: http://www.youtube.com/watch?feature=player_embedded&v=LaH_43N34Jg at 3:24 you hit the shortcut key on your mac, which I think is equivalent to "ctrl+shift+r" on windows, and you get the "start debugging" and "add/remove breakpoint", instead of this I get the same panel of your video at 2:46.

What is the problem?
win 7 64bit, st2

Hi,

I was trying to install WebInspector in Sublime Text 3 and wasn't finding it in the the list. After some help i managed to install it by using "Adding Repository" and adding the git url to the ST3 branch. Seems to be working in ST3.

I was told that if you update the "packages.json" and upgrade to schema_version to version 2 the package will show up in the "Install Package" list.

I've just installed this package via git, and all I get is the following:

No stack trace in the console, just the same message as an error

Can we get an option to have the reload on save delay a second. I build my sass files in sublime and it takes a second for them to build, but the reload happens on save. Because of this the reload doesnt show the changes when it reloads. (works if I save again right after though.)

OS: Windows 7 64 bit.
My chrome installed in: C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

Settings (Default):

{
"chrome_path": {
        "windows": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
    },
... 
}

when I do a ctrl+shift+R , click: Start Chrome with remote debug port 9222.

The chrome open but it shows the file listing structure instead of a page to debug my js:

Sublime Console info:

Running C:\Users\humandiv\AppData\Local\Google\Chrome\Application\chrome.exe --remote-debugging-port=9222 --profile-directory=Default 
Writing file /C/Users/humandiv/AppData/Roaming/Sublime Text 2/Packages/Web Inspector/swi.sublime-settings with encoding UTF-8
-1
reloading /C/Users/humandiv/AppData/Roaming/Sublime Text 2/Packages/Web Inspector/swi.sublime-settings
Running C:\Users\humandiv\AppData\Local\Google\Chrome\Application\chrome.exe --remote-debugging-port=9222 --profile-directory=Default 
Writing file /C/Users/humandiv/AppData/Roaming/Sublime Text 2/Packages/Web Inspector/swi.sublime-settings with encoding UTF-8
-1
reloading /C/Users/humandiv/AppData/Roaming/Sublime Text 2/Packages/Web Inspector/swi.sublime-settings
Running C:\Users\humandiv\AppData\Local\Google\Chrome\Application --remote-debugging-port=9222 --profile-directory=Default 
Traceback (most recent call last):
  File ".\sublime_plugin.py", line 337, in run_
  File ".\exec.py", line 158, in run
UnicodeEncodeError: 'ascii' codec can't encode characters in position 11-12: ordinal not in range(128)
Writing file /C/Users/humandiv/AppData/Roaming/Sublime Text 2/Packages/Web Inspector/swi.sublime-settings with encoding UTF-8
-1
reloading /C/Users/humandiv/AppData/Roaming/Sublime Text 2/Packages/Web Inspector/swi.sublime-settings
Writing file /C/Users/humandiv/AppData/Roaming/Sublime Text 2/Packages/Web Inspector/swi.sublime-settings with encoding UTF-8
-1
reloading /C/Users/humandiv/AppData/Roaming/Sublime Text 2/Packages/Web Inspector/swi.sublime-settings
Running C:\Program Files (x86)\Google\Chrome\Application\chrome.exe --remote-debugging-port=9222 --profile-directory=Default 
Unable to open /C/Users/humandiv/AppData/Roaming/Sublime Text 2/Packages/User/swi.sublime-settings
Running C:\Program Files (x86)\Google\Chrome\Application\chrome.exe --remote-debugging-port=9222 --profile-directory=Default 

I can get chrome to open and start debugging and I have the console working, but when I try to add a breakpoint nothing happens.

I have the following errors in the bottom console window:

[4560:2672:0318/093557:ERROR:connection.cc(730)] sqlite error 19, errno -2: PRIMARY KEY must be unique
[4560:6612:0318/093602:ERROR:textfield.h(162)] NOT IMPLEMENTED

Thanks for your hard work, this could potentially be hugely useful.

Not sure if this is even possible or not, but I'd like to specify the path to Chrome using an environment variable.

Typically on Windows, Chrome is installed under the %LOCALAPPDATA% folder for the given user. %LOCALAPPDATA% resolves to c:\users\Foo\AppData\Local under Windows 7 / 8.

So in my swi.sublime-settings I tried this:

"chrome_path": {
    "windows": "%LOCALAPPDATA%\\Google\\Chrome SxS\\Application\\chrome.exe"
  }

Clearly the above doesn't work. I'm not a Python guy, and not sure if Python allows any sort of string interpolation or similar, that would allow the use of os.environ["LOCALAPPDATA"] in there...

I see that chrome_path is passed in here
https://github.com/sokolovstas/SublimeWebInspector/blob/master/swi.py#L235

window.run_command('exec', {
    "cmd": [get_setting('chrome_path')[sublime.platform()], '--remote-debugging-port=' + get_setting('chrome_remote_port')]
})

The path that's in there now doesn't work by default with Chrome or Chrome Canary... but if you could use environment variables somehow, you could make it work.

When set_script_source is true in the config, after the first file save, the scripts are not updated in the browser, instead the logs appear like this:

If I try to save the script again after this, I get this error:

I see in the screencast that you are changing the source of the function f, and it's applying the change to the code in the browser without reloading the page. I'm trying to replicate this behavior, but when I save the javascript file it reloads the whole page. This is still useful, but it would be even more so if I could see the effect of changed live.

OS: Windows 7 64-bit

I'm getting this error in the SublimeText2 console when I run Web Inspector:
[6648:1916:0324/162708:ERROR:textfield.h(162)] NOT IMPLEMENTED

Chrome Canary opens up but this error comes up and web inspector doesn't work.

Cloned from current source, couldn't get version from package control to work.

The repo version gets a bit further,
chrome opens and I get an error in the console that opens in sublime.

[19579:61459:0507/101704:ERROR:connection.cc(730)]
sqlite error 19, errno -2: PRIMARY KEY must be unique
[19611:20231:0507/101710:ERROR:ipc_channel_posix.cc(591)]
pipe error on 3 Currently writing message of size: 24: Socket is not connected

OSX, Mountain Lion
Sublime 2.0.1 b2217
Chrome 26 (was closed before i ran debugger)

Thanks

it would be great if it were possible to sync breakpoints between SublimeText and the classic Chrome Inspector. This way we would be able to use sublime web inspector for simple debug AND switch to chrome inspector if needed without to set the same breakpoint(s) twice.