Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In chrome devtools, in all my tsx source files, syntax highlighting and intellisense no longer work

Debugging functionalities are not working anymore for me in files with a .tsx extention.

It is working as normal when debugging a .ts file: enter image description here

Source maps are unchanged from when it was still working. However .tsx files now look like this.. All the code is black rather than styled to indicate differences between keywords / strings etc .. And when debugging (which does work) I cannot hover variables to see their value.

enter image description here

Any idea how to solve this?

Edit: I once solved this by sending content type headers as explained in answer below. But the problem is back now even though when I open the source file in a new tab I can see Content-Type is "application/javaScript"

like image 911
Flion Avatar asked Nov 20 '18 16:11

Flion


People also ask

How do I change DevTools in Chrome?

Goto chrome://flags and Enable Developer Tools experiments. Open developer tools settings, select Experiments tab, and check 'Allow custom UI themes'. Reload devtools.


1 Answers

Finally managed to solve this.

As described in this question, if you manually let your webserver return the right mime-type for tsx files, chrome will show them with colors and allows proper debugging again.

for me, For an Apache server I included this in httpd.conf

AddType application/javascript .tsx

like image 170
Flion Avatar answered Sep 23 '22 03:09

Flion