Tips for enabling custom object properties in Chrome DevTools

In my typescript class, I am utilizing a Proxy to intercept and dispatch on get and set operations. The functionality is working smoothly and I have successfully enabled auto-completion in vscode for these properties. However, when I switch to the chrome dev tools, the properties managed by the Proxy do not appear in the autocomplete feature of the js console or in the 'intellisense' list that appears when typing the .

I have implemented ownKeys in the proxy but it seems insufficient. It made me wonder about how the auto-completion is integrated into the chrome dev tools.

Is there another approach I should take to ensure my properties are included as auto-completion options in the dev tools? I understand that if I were to implement them all as actual get/set pairs they would show up, but this is not feasible due to reasons beyond the scope of this question.

If I must use a Proxy for implementing get/set for certain properties, is there a method to make them visible as auto-complete suggestions in the chrome dev tools js console?

javascriptgoogle-chrometypescript

Answer №1

After experimenting with it a bit, I discovered that the Chrome Dev-Tools extract properties from the object being wrapped with the Proxy.

For example

test = new Proxy(
    {
        'alpha': null,
        'beta': null,
        'gamma': null
    },
    { 
        get: (target, prop, receiver) => {
            return prop;
        }
    }
)

This code snippet will showcase the properties.

https://i.stack.imgur.com/9Qv9u.png

If the Typescript object you're using with the Proxy already contains the properties, it's possible that TypeScript is removing them during compilation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for fixing the TS2345 compilation error when working with React

Attempting to implement the setState method in React has resulted in a compile error. Any solutions to this issue would be greatly appreciated. Frontend: react/typescript articleApi.tsx import axios from 'axios'; import {Article} from '../ ...

javascriptreactjstypescript

The getList() function from Restangular is failing to return the expected JSON data

I'm facing an issue with retrieving data from a Restangular promise. Instead of receiving pure JSON data, I always end up with a promise object. Here is the response from my API: localhost:3000/api/meal { "status": "success", "data": [ { ...

javascriptjsonrestangular

Having issues with opening an exported Excel file using ExcelJS

While working on my JS project, I utilized the ExcelJS library. Everything was functioning smoothly with English characters. However, when I switched the language of my application to French and attempted to export the content as an Excel sheet, I encounte ...

javascriptexcelexport-to-excelexceljs

Is it possible to quickly sync API data with a CSV file for updates?

My unique code allows retrieving Amazon product prices with the ASIN (Amazon Standard Identification Number). Here is the code snippet for reference. <?php class AmazonAPI { // Code implementation details here } ?> To display the price, use ...

javascriptphpjqueryajaxcsv

Struggling with integrating PHP within a JavaScript AJAX function

Here's a button I have: <button id= $id onClick="popup($id)">button</button> I am attempting to use it with an ajax function <script> function popup(id){ alert(" "); document.write(" "); } </script> My goal is to execute P ...

javascriptphp

There was an error: "Uncaught TypeError - onPageChange function is not defined for the DataGrid component in Material

I'm struggling to integrate a DataGrid component into my application. While the table renders correctly with the code provided, I encounter an error when clicking on the next page icon - react-dom.development.js:327 Uncaught TypeError: onPageChange is ...

javascriptreactjsmaterial-ui

Utilizing a While Loop for SQL Queries in a Node.js Environment

So, I was attempting to iterate through an array using a while loop. I was able to successfully print a result from the SQL connection without the while loop, confirming that the query is working. However, when I tried to implement the same query within a ...

javascriptmysqlsqlnode.jsejs

Textbox textchange event triggers Javascript function when Checked=True

$('.LblQTY').on('input', function () { var currentRow = $(this).closest('tr'); var rate = parseFloat(currentRow.find('.LblRate').text()); var quantity = parseFloat($(this).val() == '' ? '0& ...

javascriptjqueryhtml

What could be causing my canvas to not display my sprite?

Currently, I am in the process of learning JavaScript and experimenting with creating games to make the learning experience more enjoyable. However, I am facing an issue while using EaselJS and CreateJS to develop these games as a beginner. I need some as ...

javascripthtmlcanvaseaseljscreatejs

Having trouble receiving a response from an API built using Express.js and SQL Server

Currently, I am in the process of learning how to create an API using Node and Express.js. I came across a step-by-step guide that has been very helpful. You can check it out here. I've followed the instructions provided and created a similar version ...

javascriptnode.jssql-serverexpress

Unusual behavior observed within for loop; code within not running as expected

I will be presenting my code along with some images to illustrate the issue at hand. Something as simple as declaring a variable or using the log function results in the json being undefined. Upon entering text into the input field, the ajax call is trigg ...

javascriptjquery

Using Angular to invoke the transclude directive function inside the transcluded component

I am looking to develop a component that includes a transcluded section, take a look at this example: http://jsfiddle.net/vp2dnj65/1/ Upon clicking the "do" button in the example, nothing seems to happen. Is there a way to execute the transcluded cont ...

javascriptangularjs

The Material-UI DataGrid feature allows for the display of column sums, with the sum dynamically updating based on applied filters

I am struggling with calculating the sum of values in the Total Amount column of my Material-UI DataGrid. How can I achieve this and ensure that the sum is also updated when a filter is triggered? Any guidance on how to sum the entire Total Amount column ...

javascriptreactjsmaterial-uidatagrid

"Spin an image using Javascript when it is shown on the

I've got a script that shows an image when we are attacked by a monster. The image is initially set to display="none", but switches to display="" when a monster appears. What I'm looking to do is make the image rotate 360° when it changes from ...

javascriptcssimageeventsrotation

Angular 2: Issue with disabled functionality not functioning correctly

In my TypeScript code, I have created a boolean variable called readOnlyMode. When this variable is set to true, all elements should be disabled. To achieve this, I am using [disabled]="readOnlyMode" in the HTML for elements that need to be disabled. Howev ...

htmlangulartypescript

Tips for building an interactive button with changing content and retrieving variable information when the button is clicked in an Angular framework

Received dynamic data from the server is shown below: { "data": [ { "id": 4, "first_name": "Eve", "last_name": "Holt", "lat":"25.6599899", "lng":"45.3664646", "status":"0" ...

javascriptangulartypescript

Disable Chrome's suggestions bar on your Android phone

I'm having trouble disabling spelling suggestions for an input box and everything I've tried so far hasn't worked. I've already used attributes like autocomplete="off", autocapitalize="off", and spellcheck="off" for the input field, bu ...

javascriptandroidhtmlcssgoogle-chrome

How can I effectively organize an Angular2 component library for optimal efficiency?

Looking to develop an Angular2 datepicker component with the intention of releasing it and using it in multiple projects. Wondering about the best way to structure the project for this specific purpose compared to a typical Angular2 project created with an ...

javascriptangular

How can I extract data from an XML file and include it in a JSON file using GulpJS?

Being relatively inexperienced with Gulp/Node programming, I am facing some difficulties while trying to accomplish a simple task :) Within my XML file, there exists a node like the following: <widget version="1.1"></widget> My goal is to ext ...

javascriptjsonxmlnode.jsgulp

AngularJS $http.get request not working as expected

Hi there, I'm currently facing an issue with retrieving data from a webpage for use on my own website. I'm working with AngularJS and attempting to fetch data from . When checking my page in Chrome, I encountered the following error: Refere ...

javascriptangularjssingle-page-application