How to load chrome instance in development mode in React

I am building a chrome extension and using chrome.bookmarks api. When I do

console.log(chrome.bookmarks)

it logs undefined in normal development mode. When I load using load unpacked extensions, it shows up correctly.

Is there a way to have chrome instance available in development mode else it becomes very tedious to develop, like making changes and console log it, building it, then open extension popup and inspecting the console of the popup.

"permissions": ["bookmarks"],

Is there a workaround this?