Fix for Template Names Not Showing in Chrome 51

Just a quick thing this week while I work on something bigger for next week.

If you're like me and you use Google Chrome to develop in, you may have noticed that, after updating to Chrome 51, the template names no longer display correctly in the page source:

As you can see, it says <!-- TEMPLATE STARTS: n-->; instead of putting the template name, it just puts the letter 'n'. How unhelpful.

What's Happening?

Our devs looked into it turns out the new version of Chrome introduced new behavior for anonymous functions, causing a conflict with the code we use to display the template name as a HTML comment.

You can test this behaviour yourself using the dev tools console in your browser. Put the following code in:

var a = function() {};
console.log(a.name);

In Chrome 50 and other browsers it outputs an empty string. In Chrome 51, it outputs "a". Note that this is an anonymous function — so what happens when we name the function? In the console, put the following:

var b = function testFunction() {};
console.log(b.name);

In all browsers, "testFunction" is returned. We didn't set a name in the first instance, so it just returns the name of the variable.

So why is this a problem? Take a look in Modules > suitecommerce > BackboneExtras > JavaScript > Backbone.View.Plugins.js. Around line 46, we create the string that will be used to output the template name wrapped in HTML comments:

var template_name = view.template.name || view.template.Name
,   prefix = Utils.isPageGenerator() ? '' : '\n\n<!-- TEMPLATE STARTS: '+ template_name +'-->\n'
,   posfix = Utils.isPageGenerator() ? '' : '\n<!-- TEMPLATE ENDS: '+ template_name +' -->\n';

It's the first line that's important. As you've just seen, when we use .name, Chrome now returns a value, whereas before it returned an empty string. But it's not the value we want. What we want is the value returned from .Name (note the capitalization). .Name is something custom we added to our gulp tasks in templates.js.

What's the Solution?

Luckily, it's really easy to fix. We're going to fix this in the next version of SCA but if you're keen to get it fixed now all you need to do is make a simple one-line change:

// Replace this
var template_name = view.template.name || view.template.Name

// With this
var template_name = view.template.Name

Save the file and deploy. Now your template names will show up again \o/

Further Reading