Is there any way to embed "console" tab from chrome web inspector in a page?
Unfortunately I do not know of a way to do this in a normal web page in any browser but you could make an Electron app and perhaps show the inspector whenever you want for the user.
If you are looking to embed a JS console emulator on your site, perhaps to show off raw JavaScript, you can use YourJS Console. It also gives you the ability to initialize the console with custom code or a GitHub Gist.
Related
Is it possible to have a webview application for a web page and load extensions in the application?
I have created a frameless wrapper for one of our web pages, so we can hide the chrome header. I am also using the stylebot extension to alter some elements in the page. It works fine inside chrome, but when I run the application the stylebot extension is not loaded.
Any idea how can I add the extension to the application?
Greatly appreciate your help on this
Thanks, Laszlo
A Google chrome extension have to be load in Google Chrome (or Chromium based browsers). The Google chrome extension API is not included in the webview engine.
You can open a frameless window with create method of the Google window API. You should add an handler to browser action click and create a window of with "popup" type and the url you want. It's not exactly what you are looking for but I don't know a better way to do it on Mac. Perhaps some one more familliar with that environement could help you.
An other far more complicated solution is to fork the Crhomium project and do what you want. But it demand a large developpement I think.
So I know that 'Chrome Packaged App' will run in a window, I have tried to run the website I want in a <webiview> tag but it gets stuck at the beginning and I can't find a way to debug what's happenning inside that <webview> tag.
I now have tried to change the manifest to work as a 'Chrome Hosted App' but it keeps opening in a tab.
How do I start my app in a window, either by having it as a chrome hosted app?
Or by <webview> (if I find a way to debug it)?
As pointed here, a Chrome Hosted app can be open in a specific window if you enable this flag:
Enables the web app style frame for hosted apps
in chrome://flags.
Chrome's built-in developer tools can be used to debug packaged apps, extensions and webview as well as web pages (Right-click on any page element in webview and select Inspect Element).
I am trying to open a pdf from my JQM webapp. I have tried iframes/embed/object, and none of those work on an iphone like they do on a desktop browser (scrolling, zooming, etc). I have settled with simply opening the pdf via a link Link. This works fine in the standard browser because the user can simply use the browser back button to navigate back to my app.
The issue that I am having, is that when a user saves the page to thier home screen and opens it using the chromeless safari browser, they no longer have the browser back button. I have tried adding target="_blank" to the link, but apparently JQM hijacks the link and prevents opening in a new page, and I have been unable to get the hacks to work.
I have also tried pdf.js, but I can't seem to even get that to work as my javascript knowledge is fairly limited, and the examples are pretty advanced. The only tutorial that I found used an old version which I couldn't get to work.
Are there any ways to bypass the JQM in openning a link in a new window (which would in turn open in the mobile safari rather than my chromeless web app), or are there any other suggestions for how to open a pdf from a webapp?
Just disable the default jQuery Mobile behaviour, by specifying data-ajax=false.
For example:
Link
See http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
For my webApps I used https://docs.google.com/viewer to embed the pdf into my interface.
So, when I navigate the webApp by home screen icon, the app doesn't close when I open the pdf.
I met the same question: open pdf in webapp with html5.
I've tried several solutions: iframe、embed、pdf.js, but none of them is the best solution.
tips: iOS 9.x upper, open pdf with iframe only show the first page of the pdf file, and there will be a <img /> tag in the iframe body when you debug.
util now I still have this troublesome problem, anyone has solution please write your experience here.
Thank you.
I followed the approach mentioned in how to emulate a mobile (android) browser on desktop
to project the mobile webpage's properties on desktop chrome browser. I was successfully able to do that but now I have some queries as mentioned below, please let me know your inputs on that
a) How to use the "Select element option" of chrome developer toolbar to view an element's property for a mobile webpage. In normal desktop chrome browser we have the web page displayed and below that the developer toolbar is displayed and we can easily spot the element using a pointer but with mobile webpage displayed on desktop chrome browser i am not able to use this option as the webpage is not displayed.
b) I tried to copy the xpath and other things from the displayed HTML (HTML of mobile webpage on desktop chrome browser) but it gave me an error that "You need to install a Chrome extension that grants clipboard access to Developer tools". I installed one such extension named: "Auto Copy" but then also I was not able to copy. Please let me know how to go about it.
Thanks a lot in advance,
Namit
For (B) – Judging from the discussion when that message was introduced, it sounds like you need to roll your own simple custom extension to enable clipboard access. Here's a sample manifest.json – I haven't tested it out myself, but it looks pretty straightforward. The extension development Getting Started guide explains how to turn a file like this into a working extension and install it locally.
Im using netbeans and the framework GWT. Due to the GWT structure, on my browser i can't see the html code with the simple "View Source". How can I see this? Im using Google Chrome.
Bye
View Source only shows you the HTML page that was downloaded (i.e., not much). Try using Chrome's Developer Tools to see the DOM structure after GWT's loaded. You can also use it to see network traffic from the page, and see JS errors if there are any.
I was faced with exactly the same situation. I use the Firefox extension Web Developer: on the "View Source" menu there is an option "View Generated Source".