How does the Brave browser have Chrome's dev-tools? - google-chrome

Really Quick question:
Why does the Brave browser have Chrome's dev-tools?
Does this also mean that I don't need to test my website in Brave if it works in Chrome?
Thanks :)

Take a look at their github page. Especially the tags they added:
Notice the word "Electron", now I could explain to you what Electron is but they have an excellent explanation on their Electron Home page:
Electron is an open source library developed by GitHub for building
cross-platform desktop applications with HTML, CSS, and JavaScript.
Electron accomplishes this by combining Chromium and Node.js into a
single runtime and apps can be packaged for Mac, Windows, and Linux.
As you can see, Electron uses "Chromium". I could explain but.... you've guessed it they offer a great explanation themselves:
The Chromium projects include Chromium and Chromium OS, the
open-source projects behind the Google Chrome browser and Google
Chrome OS, respectively. This site houses the documentation and code
related to the Chromium projects and is intended for developers
interested in learning about and contributing to the open-source
projects.
So thats why you can access the chrome dev tools inside Brave.
On to your other question:
I don't need to test in Brave if my website works in Chrome?
Yes and no, you can be fairly certain that Brave will do everything Chromium does. But in the end we can't be certain what Brave does to the pages loaded through it. Having said that I won't be giving you a firm answer on this :)
(PS: if you set up automatic testing it doesn't really matter if you have to test another browser)

Related

How to open iOS share menu via HTML

I'm currently working on a webpage and I'd like to implement a function to share this website to friends of the website-visitor.
Therefore I've integrated the Whatsapp-sharing URL Scheme.
<a href="whatsapp://send?text=text-to-share" data-action="share/whatsapp/share">
share-button
</a>
But there is a better way in iOS - I'd like to open the iOS-share-menue:
iOS sharing-interface
Do you know, if there is any possibility to open this?
The iOS-Amazon-App does this within the product-pages.
I'm looking forward to your answers.
best regards,
Christoph
Google has introduced the Web Share API for Web applications in Chrome. I think your problem is similar to this question. https://stackoverflow.com/a/42081215/4711785
Here is a link to a page which provides information on how this can be done and also a link to an example of this working...
(I have not copied the code from the article or the W3C source into my answer in case this is some sort of copyright violation)
https://w3c.github.io/web-share/
I have tested this on safari, chrome, and edge on IOS and macOS as of Oct 2022 and it worked perfectly...
I also tested it on the Opera browser running on a Huawei phone running their OS (not android) and again it invoked the OS'es share menu...
I fully expect this to work just as well on Windows and Android devices but I don't have any to test with...
Info and code to make it work: Web.dev article
and,
An example page you can use to test your device/browser...
open device share menu using web page button demo

Firefox OS 'HELLO WORLD' development

i want to develop apps for Firefox-OS but i simply cant understand where to start from. Okay i have firefox Os simulator installed, i got my notepad open, I know html 5, css3, JS, jQuery bla bla bla...I googled but simply couldnt find the tutorial for HELLO WORLD FIREFOX OS app. any help guys. thanks
As far as "Hello World!"-type of beginner-applications concerned, I think fxosstub is as close as it gets. Also as you will most definitely want to work with some of the Open Web API-s, so I'd recommend studying Robert Nyman's Firefox OS Boilerplate App, which itself, is based on the above mentioned fxosstub application, and is a great way to learn a thing or two about the Open Web API-s and about accessing the mobile device hardware through JavaScript API calls in Firefox OS.
Those two articles mentioned both appeared on Mozilla Hacks, mozilla's developer blog, which is treasure trove of - among other things - Firefox OS related articles and resources. Another great place to start would be the Quick start guide in the Developer section of the Firefox Marketplace.
For technical reference you should check out the Mozilla Developer Network - it contains a host of very useful information about Web Applications, Web API-s and general web development, too.
For Firefox OS UI-design samples, resources & best practices you might want to check out the Mozilla Brick Library (a successor to the former Building Firefox OS website) if you want your app to blend in visually with the core applications in Firefox OS.
Also there is a pretty active community at the Mozilla webapps mailing list where you might find lots of helpful chaps, well-versed in the intricacies of Firefox OS, and would gladly help you out whenever you might find yourself stuck during development.
This took me about a minute to find. A step by step guide. More info related to app development for FF OS can be found at their official page
Edit: A video tutorial with the use of the jQuery library.
Here is a BMI calculator webapp that follow Firefox OS build-in apps (Gaia) structure and use Firefox OS build-in styles. Check the demo to see how real hosted webapp looks like on any device.
(For a web platform, you can use whatever you are familiar with, but BMI calculator is a kind of hello world type app though...)
Or here is the webapplate project, which has preconfigured webapp template for hosted or package
reuse. BMI calculator webapp is modified from that.
(Note Firefox OS build-in styles are not cross-browser friendly yet. )
I think the above answers are a bit out of date. I think the fastest/easiest way to start development is to
1) Download Firefox Developer Edition and start it up
2) From Firefox developer edition, launch the WebIDE (click on the little spanner, and choose WebIDE). From there you can create a hello world application.
For more information see the WebIDE documentation

Starting web development with Google Chrome

For the last few years I have been using Firefox, Firebug, and the Web Devevloper Firefox toolbar for all my web dev needs, quite happily. I am, however, very interested in experimenting with moving my web dev support over to Chrome, but I have no idea where or how to start. How much functionality is build into Chrome and how do I access it? What add-ins do I need and where do I learn about using them?
These are two of many questions I think face most web devs moving into a much less familiar environment. I'm trying to ask a broader question here, along the lines of, what do I need to use and know for effective web deb and JavaScript debugging in Chrome and where is best to learn what I need to?
Google Chrome (as well as Safari) has really underestimated Developer Tools feature. Lots of developers are indifferent to it and use Firebug through habit. (to no purpose!)
But for me it is the main debug tool: it looks more pleasant than the latter and includes a way cooler features. (e.g. Timeline — separate time intervals for Loading, Scripting and Rendering).
Developer Tools Tutorial.
Can't give up with Firebug? Have a look — Firebug Lite.
More tools.
→ Webmaster tools;
→ Speedtracer;
→ Page Speed.
→ From google webmasters-faq:
There are several tools to help you test your website in Google Chrome:
Web Inspector
Right-click on any component on a web page to launch the web inspector. You'll be able to see the elements and resources associated with the component on which you clicked, including a hierarchy view of the DOM and a JavaScript console.
Task Manager
Select the Page menu icon, then Developer > Task Manager (or press Shift+Esc). The task manager shows all running Google Chrome processes, and the resources that they're using (memory, CPU, and network).
JavaScript Debugger
Select the Page menu icon, then Developer > Debug JavaScript. This launches a JavaScript debugger that can be used to attach to existing processes.
in chrome: right click and "Inspect Element"
the Light Version of Firebug is available too.
While in Chrome, press Ctrl+Shift+I and start experimenting. It's all you'll need.
The Web Developer port from Firefox is very handy.

What plugins improve Google Chrome as a web developer's browser?

The usual recommendations for a web development and debugging web browser are Firefox/Firebug or Safari/Web Inspector.
But I like Google Chrome, and would like to use this as my primary development browser. What plugins or tools should I get to optimise my web programming experience with Chrome?
Google Chrome's own "Firebug" is very good, just right click and inspect element to bring it up.
Frame two pages is helpful.
Chris Pederick's Web Developer toolbar is good too.
The Development and Coding Search (Chrome extension) is one of many Chrome extensions for developers. See the featured web development extensions for more developer-friendly extensions.
Pendule has a lot of good bits and bobs under one extension/icon. Few things I like about it...
View generated source
Colour picker
Ruler
Validator
There are probably tons of alternatives, but it's the best I've seen so far.

Tool/framework for automated web app testing in Google Chrome browser?

Is an opensource/commercial tool/framework, available for automated web app testing in Google Chrome browser on Windows XP / Vista? ( An alpha/beta Tool is also OK)
Thanks
Selenium supports Chrome pretty much out of the box because it works by injecting javascript in the web page. http://selenium-rc.openqa.org/
Webdriver has an early version of Chrome driver. http://code.google.com/p/webdriver/
Both are open source and works on Windows.
I found a tool called QA Agent (http://qaagent.com). This is a web based IDE where you can develop your tests using jQuery and javascript. Currently it supports only Chrome so may be it will be a good choice for you. And of course it is free.
For those who are not developers you could try FRET for automated web testing with Chrome. It's still in beta and even though it states that no programming is needed a basic understanding of HTML / CSS etc. is recommended.