5

Using Visual Studio 2013 RTM and Web Essentials I get the following JavaScript error in Chrome on page load.

Uncaught Error: Syntax error, unrecognized expression: div.main/PhoneIcon.png

My best guess is that it is referring to the following line of html which is near the top of my page.

<div class="main/PhoneIcon.png sprite"></div>

I'm also not able to edit/modify HTML/CSS using Browser Link.

What do I need to do to fix Browser Link?

Ryan Blatz
  • 71
  • 1
  • 3
  • 1
    Your class name is invalid: http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-selectors – Tieson T. Nov 01 '13 at 17:58
  • 1
    That only applies to css selectors. So any selector I would write for that class name would need to be escaped, but the actual html does not need to be escaped. http://stackoverflow.com/a/6732899/2344026 – Ryan Blatz Nov 01 '13 at 18:29

2 Answers2

12

Browser Link tried to create a jQuery selector that would uniquely identify this tag, but it didn't handle the unexpected class name correctly.

You can work around this by adding an ID to the tag. Browser Link would rather use an ID, because it's more likely to be unique. It will ignore the class name if there's a unique ID on the tag.

Or, if you just want Browser Link to get out of the way, you can disable it by unchecking "Enable Browser Link" in the Browser Link menu on the Standard toolbar.

Joe Davis
  • 792
  • 5
  • 8
4

This is a bug in Microsoft.VisualStudio.Web.PageInspector.Runtime.MappingData.MappingDataUtilities.GenerateSelectorsFromCssClasses() inside Visual Studio itself. It doesn't escape unusual classnames.

This has nothing to do with Web Essentials; it's a bug in the BrowserLink core.

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964