Menu
Template literals are a new feature introduced in ECMAScript 2015/ ES6. It provides an easy way to create multiline strings and perform string interpolation. Template literals are the string literals and allow embedded expressions. Before ES6, template literals were called as template strings.
# Open the Issues tab Open DevTools. Click the Go to Issues button in the yellow warning bar. Alternatively, select Issues from the More tools menu. Once you're on the Issues tab, click the Reload page button if necessary.
Press the F12 function key in the Chrome browser to launch the JavaScript debugger and then click "Scripts". Choose the JavaScript file on top and place the breakpoint to the debugger for the JavaScript code.
As for version 69.0.3497.100 (Official Build) (64-bit) in Ubuntu is still a bug.
As a workaround you can start adding: //` to the end of lines containing templated strings, which fixes the formatting in the chrome sources tab.
Here some examples of my working jsx code.
In component props:
<Field
name={`${fields.name}[${index}].comments`}// `
component="input"
type="text"
/>
As a child element:
<label>
{`${t('Condone')} `}{/* ` */}
</label>
In a statement:
switch (DEBTTYPE) {
case DEBTTYPE_MACHINE_PRODUCT:
id = `machine_product_difference_row_${row.id_productdebt}`;// `
break;
....
I really hope that they can fix this issue as fast as possible.
This December 14, 2017 comment from the DevTools team says that they updated the CodeMirror version used in DevTools, and the issue should be fixed now. In Chrome 64 and beyond it should work. In earlier versions of Chrome it'll still be broken. You can check your version at chrome://version.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With