Is there any way to create devtools panel on mobile chrome - javascript

I want to write an extension which can be used on mobile chrome, but it seems google doesn't supply a way to do that. So I was thinking to add my extension to developer tools panels using the api chrome.devtools.panels.create. For web page, my new panel can show on the dev tools panel bar, but for mobile chrome using adb to do a remote debug, my new panel won't appear on the dev tools panel.
At first I think it is a dead end, but after that I found extension "page speed" can be seen when using adb to do a remote debug. I copy the manifest.json content ,and replace it with my own content, but it still can't work.
Does any one know how to write a extension/devtools panel to debug chorme mobile?

This doesn't directly answer your question, but if you're ultimately looking for a way to get devtools on mobile, it's now possible on the latest Chrome stable (and newer) channels.
http://www.html5rocks.com/en/tutorials/developertools/mobile/

No, you cannot build extensions for mobile chrome at this time. See the FAQ.

Related

How can I achieve bookmarklet functionality in Microsoft Edge browser (without installing anything extra)?

Microsoft Edge browser does not support javascript bookmarklet in favorites.
Is there an easy workaround for this?
When browser extensions for Edge come out, then it might be possible if the user installs an extension -- but that's much higher overhead for the user and developer.
I assume this is by design. But what is the microsoft workaround for this besides extensions?
description of problem:
http://answers.microsoft.com/en-us/windows/forum/apps_windows_10-msedge/please-support-drag-and-drop-bookmarklet-and/dc7d2f09-8742-46a5-bb4a-4d1f576b8919
and old workaround: http://www.howtogeek.com/231775/how-to-install-and-use-bookmarklets-in-microsoft-edge/
a hack using an installed program:
http://www.emmet-gray.com/Articles/EdgeManage.html
After experimenting around, I found out that in fact EDGE does support bookmarklets, but they call it Reading list. It works almost like bookmarklets, but a bit more poorly and difficult to debug, plus there is a (logical) limitation that cannot be circumvented as easily as in say Firefox: if your script comes from a http:// site, it cannot be run on a https:// site.
You can use bookmarklets in Edge this way:
Right-click your button with your javascript:.... url.
Click Add to reading list.
Navigate to your site and run the script on that site by clicking Reading list (Reading list on my version of Edge on PC is located behind the three horizontal lines called Hub and then the fancy icon with many curled horizontal lines called Reading list, on mobile the Reading list icon appears above the address bar when you click the ... menu icon) and from that list clicking your script.
I have tested it AND IT WORKS ON BOTH PC EDGE AS WELL AS MOBILE EDGE (Mobile: Windows 10.0.14393). Hope this helps someone as I almost abandoned my Lumia for an Android mainly because of my perceived lack of this feature.
With Windows 10 Fall Creators Update, Edge now supports editing URLs for favorites.
Reference : https://blogs.windows.com/msedgedev/2017/10/17/edgehtml-16-fall-creators-update/
Edit URLs for favorites
By popular demand, we’ve added the ability to edit the address for
individual favorites in the Favorites Hub or on the Favorites bar.
To do this, simply right-click or press and hold a favorite and select
“Edit URL.”
Points to Note:
The javascript code that's pasted in place of the URL should be in a single line. [i.e. remove all the new line breaks.]
The javascript code should not exceed 2083 characters.
Now that Edge supports editing a URL on the favorite bar - simply do the following.
Add a favorite (doesn't matter what)
Use "Inspect element" from the bookmarklet button context menu (right-click)
Use "Edit URL" from the favorite (create in step 1) context menu (right-click)
Paste the bookmarklet URL
(tested on 41.16281.1000.0)
I know this is kinda an old question, but...
Now that Microsoft Edge stores its favorites in a database, the "old workaround" is no longer viable.
But, there is a free 3rd-party application called EdgeManage that will allow you to edit/create the URL directly in the favorite.
So, this will allow you to use bookmarklets in Edge
PS: I am the author
I'd be happy to discover a better work-around, but the closest I have found for MS Edge version 92.0.902.78 is a feature known as "Snippets". The devtools guide describes Snippets as alternatives to bookmarklets.
To add a "Snippet":
Open the dev tools (F12 or Ctrl-Shift-I or navigate: ...->"More Tools"->"Developer Tools")
Find the "Snippets" pane in the "Sources" panel
Click the "New snippet" button
Add your javascript code in the editor area and save
To run a "Snippet":
Right-click on the snippet name in the Snippets list of the developer tools and select "Run"
Each snippet is associated with a uri-looking link (like snippet:///add-library-proxy), but these don't appear to be recognized in bookmarks nor from in the address bar.

Liquid Slider not working properly in chrome extension

I am working on a google chrome extension. I am using Liquid slider to help me with the popup, when I am in brackets and do live preview, I get exactly the result I want.
https://gyazo.com/d2b5e7215ff8dfab59d677fd94637a25
But when I go into google chrome to test my extension this happens.
https://gyazo.com/48ea596645f0b16305915fb144d2aad8
It is not in the tab format anymore.
I could not find any support on this, if anyone has any idea why this does not work. Is it just because I can't use Liquid Slider in my chrome extension? I have no idea. Please tell me if you need more information.
Edit: If it is not possible to fix the error and bring back the tabs, we can also just use arrows, and figure out how to delete the tabs.
Chrome extensions have stricter security & sandboxing than regular web pages - for example, Content Security Policy is enabled by default. That may explain the difference.
To get more specifics about what's going wrong, you can debug your extension by right-clicking the icon and selecting Inspect Popup. This will open the familiar Chrome Dev Tools where you can check the console for errors, etc. Does that give you more specifics to go on?

Chrome automatically blocks javascript when open Developer (F12)

I have a problem with Chrome running on my PC.
Websites are running fine on Chrome, but whenever I open developer tools (F12), Chrome blocks that site's javascript. Keep the developer tools opened, and refresh the page (F5), Chrome loads the site with without any scripts.
This happens to all websites.
Incognito mode doesn't encounter the issue.
I checked settings in Chrome and it allows JS.
I tried to disable extensions, doesn't work.
I re-installed Chrome, doesn't work.
I tried to run using a different Chrome user account. Work fine.
But I am a developer so I don't want to use incognito mode all the time or use different account.
Please help,
Hoang
Edit:
* Add screenshot
Select settings from "Inspect element window" and untick the "disable Javascript" check box

chrome/firefox- how to run a javascript command

I am using a gwt based ui design framework (called GXT). In the docs for this framework, it is mentioned that running "javascript:isc.showConsole()" when the app is running, will open the developer console in browser.
However when I run this in Chrome it instead does a google search for the command- in firefox it simply does not work.
How do I execute this javascript in firefox or chrome--
javascript:isc.showConsole()
Bookmarklets cannot be executed in the location bar/omnibox any more.
You have to bookmark the javascript: link before it can be executed.
A better solution is using the built-in Developer tools, in which code can be pasted and executed in the current page:
Firefox: Ctrl Shift K - See Using the web console.
Chrome: Ctrl Shift J - See Developer tools.
In Chrome, you add a tab, open bookmarks - click Other Bookmarks, right click in the bookmarks area, click add new page - and paste the URL.
In Firefox, just manage your bookmarks, click on the folder, right click in the bookmarks section and click New Bookmark.
You have to put the command in the URL of the very SmartGWT
application that you're developing, not any blank page.
Making it become a bookmark bar is a good idea, click that bookmark
when you're opening the application will open the console for you.

How to make Google Chrome JavaScript console persistent?

Since I'm building a dynamic site, I need to track the changes between pages, ie. Ajax calls, POST, GET stuff and similar stuff.
I'm looking for the same functionality like in Firebug (where you can enable "persistent" and the console is not cleared every time you reload a page or submit a form.
So, my questions is: is there a way to make Google Chrome JavaScript console persistent?
(And if yes, how?)
Update: Copying the answer here, if anyone's still looking for this, Chrome 14+ has a setting in Developer Tools > Settings labelled "Console: Preserve log on navigation".
Update 2: the latest versions of Chrome (33+) have this option by right-clicking in the console.
Update 3 (late 2017): The latest versions of Chrome (60+) have this option by opening the console, clicking the gear in the top right corner and selecting "preserve log"
If anyone's still looking for this, I'm on Chrome 15.0.874.58 beta-m and I have a checkbox in Developer Tools > Settings labelled "Console: Preserve log on navigation". Does the job nicely.
at Version 67.0.3396.87 (Official Build) (64-bit)
Unfortunately, Chrome doesn't support that functionality yet, although there was talk in December 2010 about adding in the next major release...
This answer is no longer valid
As of Chrome Version 73.0.3683.86 (Official Build) (64-bit):
Click the ellipsis in top right of Developer Tools
Navigate to Settings > Preferences > Console
Check Preserve log upon navigation
Try this to enable console on popups
I had the "preserve logs" options enabled and still had the Console losing focus to the Sources tab. If that happens (apparently during debugging), it helps to disable "Focus sources panel when triggering a breakpoint" in "Settings > Preferences > Sources".
In Chrome v102
I opened Chrome Dev Tools,
I clicked on "gear" icon (Top right corner)
Enable "Preserve log" checkbox

Categories

Resources