Debugging background scripts in safari extension - safari-extension

I am working on a custom Safari extension and would like to debug the Background scripts. I am not certain how to do this? Ideally, if there was a way to step into the background scripts, that would be great. But when I try to step into a background call, the Safari debugger just steps to the next line. The console.log within the background scripts do not get printed to the console (This is the console I launched from right clicking a popover that is part of the extension and then hitting inspect).
Any help on this would be great. Thank you.


This is an old question that asks about a different type of Safari extensions but I figured it could be helpful to add an updated answer now that Safari (v14) supports the Web Extensions API (similar to the API that all other major browsers use).
Debugging background scripts is now built into the Safari menu in the toolbar: "Develop" => "Web Extension Background Pages" => select your (enabled) extension. That should open the dev tools with all your background scripts where you can set breakpoints, check the network tab, etc..
As a side note, you can debug your extension's popup by opening it, right clicking the popup and clicking "Inspect Element".


In case this comes useful for someone - I figured out a way to view console statements in the background scripts. Open the extension builder and click on Inspect Global Page. Go to the console tab and the console.log messages in the background scripts will be printed in that console.


Now you can use Safari Preview to debug your Safari App Extension. There is a control to select the extension container at the lower-right corner of the console.

Related

Safari Web Extension icon does not open popup from the overflow (>>) menu

Video showing the bug: https://www.youtube.com/watch?v=tQoOYWe0jfE
Install any Safari Web Extension from the Mac App Store (e.g. DuckDuckGo Privacy Essentials, Bitwarden Password Manager).
Resize the Safari window until the extension browser_action icon is forced into the overflow menu (>> at the far right of the toolbar).
Open the overflow menu and click the menu item for the extension. Nothing happens.
This even occurs when using the sample extension "Sea Creator" developed by Apple. You can build it and try it out by following the instructions on this page: https://developer.apple.com/documentation/safariservices/safari_web_extensions/developing_a_safari_web_extension
I have filed a Feedback Assitant report for this issue: FB9495287 / http://www.openradar.me/radar?id=5035732439662592
Anyone know what's going on here? Or does anyone have a workaround to get the extension popup to appear when invoked from this menu?

Cypress - Overlay not popping up when button is clicked

Description:
I am currently trying to write an automated test that involves clicking on a button within a navigation bar. The expected behavior is that an overlay that contains more links would pop up, as seen in this video here: https://www.screencast.com/t/55vkmhY8msjt
When testing this manually within a Chrome browser (which is recorded in the aforementioned video), the overlay pops up as expected.
But when executing the automated Cypress test within the Cypress browser, Cypress is able to locate the element and successfully click it, but the overlay does not pop up.
When I manually click on the button within the Cypress browser, the overlay does not pop up.
Video of bug being reproduced:
https://www.screencast.com/t/iSn8suNHa
It's hard to tell, but after the test execution finishes, I am manually trying to click on the button with my mouse.
I've tried several things:
cy.get(selector).click({force:true})
cy.get(selector).trigger('click')
cy.get(selector).invoke('click')
Extra information:
This button was recently re-implemented using React Native's TouchableWithoutFeedback
There are no errors being thrown in Cypress, no errors in the console.
Versions
Cypress 7.5.0
Chrome Version 90.0.4430.93
Can somebody please suggest some other steps I can try?

VueJs dev tools panel not showing

I started using vue dev-tools in my application but it is not visible when in developer mode in Chrome. I tried various solutions found on the dev-tools github page and in other places on the web, but no luck. Below are the things i have done/tried to get it to display.
Enabled allow access to file URL’s option in the chrome extension
Added Vue.config.debug = true; Vue.config.devtools = true; just before new Vue({})
Added non-minified versions of VueJS file
Also I am using Chrome latest version: 55.0.2883.87.
I do get the following message when I click on the chrome extension
Except the panel is not actually showing.
Does anyone have a solution to this? Thanks.

I could not get the Vue icon to be active on the menu bar, however I was able to get the Vue tab to show in the Chrome developer tools. Try the following:
Close the Chrome developer tools window
Hard refresh the browser
Re-open the developer tools window and look for the Vue tab
The icon in the toolbar might still indicate that it cannot detect Vue, but the tab should be visible in the Chrome developer tools.

I had this same issue, I was using minified vue from cdn "vue.min.js" .Then I removed that and used non-minified vue. Then I reloaded browser and reopened console and the vue tab was there.

For me, I was running a local HTML file. By default, Chrome blocks extensions from working on local files.
3-dot menu -> More Tools -> Extensions
Find the Vue extension, click details and change turn on the setting "Allow access to file URLs:
Screenshot
close & reopen chrome

Also found today that if you have an ad blocker installed that this also stops Vue Devtools from running properly.

Closing the file tab and reopening it worked for me.

Restart many times Google Chrome
Don't use min file
And add before new vue instantiation:
Vue.config.devtools = true;

chrome developer tools should be close before enabling the vue dev tools extention...
(if chrome devtools is open, close chrome development tools and re-open)

Just do a "hard reload" for a few times. On windows: SHIFT + F5.
On Mac: CMD + SHIFT + R.

Use the devtools beta for Vue 3. And always check if your Vue app mounted correctly.

Step 1: add vue.js devtools as an extension from here
step 2: After adding vue.js devtools, close your browser.
Step 3: Open your browser and open your html page.
Step 4: click right side of your mouse and select inspect and try to find Vue.
Note: If you didn't added the CDN of vue.js, then add these line to your html file.
<script src="https://cdn.jsdelivr.net/npm/vue#2"></script>

You should enable Allow access to file URLs from Vue extension and then hard refresh your page with Shift + F5
It worked for me

(For Firefox Browser) If the add-ons 'Vue.js devtools' is added in browser..Just click on Inspect Element (or press F12) and there is a tab of Vue along with Inspector, Console, Network etc. Click on that Vue tab and enjoy debugging.

Just do hard reload and close development console then reopen it.

Hard Reload, help me.
Open devtools -> right click on reload button -> Hard Reload

Please make sure you don't use the production CDN. The only way that make it work for me is to use the VueJS dev version.
Development : vue.js

This happens to me periodically, pretty annoying because there seems to be no cause.
Go to Chrome browser extensions
Remove the Vue DevTools extension
Add it back again
Hard refresh your page
Chrome - Version 71.0.3578.98
MacOS Mojave 10.14
VueJS 2.5.21

close the chrome app
re-run development server
re-open chrome app
open localhost
press F12 (to open development tools)

In case you are using vue3, uninstall Vue devtool extension and install the beta version.
you can install it for chrome from the below link:
https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

In #Daryn answer he mention that he has problems witch vue icon - here is solution to this part of running vue extension on chrome which in the same time also solve OP problem for me:
During plugin installation for short moment in upper right chrome corner the VUE ICON appears with message (screenshot is not my):
And CRITICAL is to click right button on that icon (without close that message!) and choose "PIN" (it pin to extensions icons bar) - if you not do it - then you will never see that icon again (which is mistake). After that shut down and reopen chrome. And now in you page with vue, this icon should have green colors (you can click on it) and click right button on some page element (or on screen center) and choose "Inspect" to see

maybe you can go to settings then go to preferences then look for persistence then enable local overrides, sorry my english is not good

Don't know if this helps but make sure to refer to app.js in your view file you are rendering in your current path. Laravel example from view file: <script src="{{ asset('js/app.js') }}" defer></script>
This way the vue extension starded working for me.

You should run
npm run watch
or
npm run dev
otherwise you can not see Vue Toolbar

Restarting Chrome worked for me

Maybe obvious but the Vue panel is not available when in incognito mode. In this case, the Vue icon is not visible either.
Enter chrome://extensions in the address bar and click on Details for Vue.js devtools. Scroll down to "Allow in Incognito" and switch to On.

don't forget about
npm run dev
(or something like in your project)
And then try advisions from first answers

Browserstack: Developer Tools for iPad?

I am using Browserstack to test some websites on the iPad. I just don't seem to get where the developer tools are within that emulator. Shouldn't there be Firebug Lite somewhere? Can someone point the dev tools out to me please?

Launch iOS simulator from BrowserStack.
Once loaded, from the OSX menu bar, click Help > Mac Help.
In the open window type "Safari" in the search box.
Click "Safari Overview".
Click "Open Safari for me".
From the Safari menu bar, click Develop > iOS Simulator > (the iOS tab you want to inspect)
Screenshot of debugging iOS inside BrowserStack

As I posted here, Browserstack now appears to support Dev Tools, but only on physical devices (those with a blue mobile icon, below).
You activate the dev tools by clicking the button in the toolbar:

In the iOS simulator you can click the 'bookmarks' button (of the device) and firebug lite is available from there. It does not seem to load on the iPhone 5 that I am testing currently but may work for someone else.

To open Safari for debugging a simulator, follow the instructions above. If Safari Overview is not available, look for a "Search the Web" link at the bottom of the window. This also opens Safari.

Add Button On Safari And Execute Shell Command On button Click

I want to run a shell command from Button on Safari Browser. I have successfully added the button on safari browser using Safari Extension Program. Using that button I'm able to open a website in new tab. basically I want to use that button to run a tool on mac.
I have developed an mac application and want to run this application from the button on that safari browser. For that I need to run a shell command from the button.
Please help me I'm new in mac development and safari extension. My first question is: Is it possible to run a application on mac from the button on safari browser ?
If its possible am I join in right direction to execute that application from shell command which is run on button click ?
Is there any other way to do the same ?
Please help me . Thanks in advance.

You can create a server in node.js script and insert the code in it to run the command( to run that tool). Now call this url from button that you have added in safari browser.
Not very sure but may be use full for you.