![]() ![]() The default configuration won’t enable source map generation, so you’ll need to edit the auto-generated configuration file. Now, generate the TypeScript compiler configuration file: npx tsc -init Next, install the typescript package: npm install typescript Let’s prepare a development environment to debug any client-side TypeScript file in Chrome.įirst, create a new npm project in any directory you like, as follows: npm init This is a great way to learn how to debug TypeScript in Chrome because that manual configuration and setup helps you understand the TypeScript debugging internals. But in some scenarios, you’ll need to configure the TypeScript compiler, generate your own source maps, and manually link your transpiled TypeScript files using the HTML script tag. When you use frontend frameworks to build your apps, their TypeScript templates typically come with TypeScript compiler configurations already included and they automatically generate source maps for you. Debugging any TypeScript file: Manual configuration Mobile frameworks that support TypeScript-based development, such as React Native and NativeScript, can also interconnect with the Chrome desktop app, so it’s also possible to debug TypeScript mobile apps on Chrome. This is how you can debug server-side TypeScript code in Chrome. With server-side runtimes, like Node and Deno, you can run JavaScript/TypeScript and listen to Chrome DevTools debugger events via v8. ![]() Moreover, Chrome can debug client-side TypeScript code that runs on Android WebView/Chrome via the inbuilt remote debugging feature. This is how Chrome lets developers debug client-side TypeScript. The official TypeScript compiler, tsc, can generate source maps during the transpilation process, so now you can write TypeScript code, transpile to JavaScript along with a source map, and debug TypeScript code in the browser while executing the transpiled JavaScript code. Similarly, you can debug a TypeScript file when you run its transpiled JavaScript version in Chrome. For example, it’s hard to debug a minified JavaScript file in the browser, but if you use a source map along with the minified version, you can easily debug the readable JavaScript file while executing its minified version. ![]() ![]() So, how can you debug TypeScript in Chrome if it doesn’t natively execute TypeScript? Chrome and all standard web browsers support processing JavaScript source maps.Ī JavaScript source map typically maps a particular form of a specific JavaScript source code to a JavaScript source code the browser executes. Web browsers have inbuilt support for JavaScript and WebAssembly , but not for TypeScript. How Chrome DevTools lets you debug TypeScript
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |