How else can I review the responsiveness of a local hosted app without using dev tools? - devtools

I'm working on an app on my machine and run it on local host. Sometimes browsers dev tools are not accurate and once I am making the changes in my code and then run, it doesn't look like how it was in dev tools. I'm talking about some alignment, responsiveness, not about styling, colors etc.
When I am comparing my app in different browsers it doesn't look the same in all of them, so I'm no sure which one is actually the accurate view.
I have tried Edge, Opera, Mozilla, Chrome. My company is monitoring my pc, so I can't install random stuff on it.
Is there any other option to preview accurately my app? Any extension or some site?
Thanks in advance.

You can always use other browsers like Opera which has developer mode, as well as, Microsoft Edge and Safari that offer web development tools. As for the alternatives for Firefox, I believe it was already answered, check this: What are the alternatives to the Firefox Developer Tools?
Moreover, these might not directly solve your problem but if you are looking for plugins or apps, check these useful tools out: Plunker, Percy, Ghost Inspector, Requestly.

Related

What would be a minimum system/browsers version to run a simple website?

I got this job which I have to create a promotional website for a prefecture and they are asking me to list the minimum system requirements a user must fulfill to access this website. I am not sure on how to make this list. The website will have two versions: one very simple for older browsers and computers, and another one responsive. The idea is to maintain everything very simple, without any animation or something that would be difficult to run on older browsers.
What do you guys think would be a safe way to describe the minimum system/browsers version for using a website like this?
Thank you very much!
Most web development companies set a minimum level of browser support, not so much system specifications. My development company specifies the most recent two versions of Internet Explorer, FireFox, Safari and Chrome. If they need to support older browsers, I would set the minimum to IE8 and maybe 10 previous versions of FireFox, Chrome and Safari.
Also, you should use something like the HTML5 boilerplate and feature detection in the site. That way you can build one website that satisfies all of the requirements. Building two separate sites becomes a nightmare when it comes to future updates.

What are the differences between Google Chrome extensions and Firefox add-ons?

I have been developing Chrome extensions and as I have already mentioned in a question on SO, I have problems paying that starting charge witch Google asks. So I quit wasting my time developing extensions for a company that has no respect for developers and I'm starting to develop Firefox add-ons. So I'm a total newbie in this area.
First of all I have to mention that I am NOT looking for an automatic functionality/way to convert them. I have noticed that one difference between Firefox add-ons and Chrome extensions is that there is not such a thing as popup.html in Firefox (maybe I'm wrong).
How can I find other main differences so that I can convert my extensions to Firefox add-on?
Firefox addons do have a popup paneil in their SDK available to use(https://addons.mozilla.org/en-US/developers/docs/sdk/latest/modules/sdk/panel.html).
I'm developing a Firefox addon right now and I can tell you that their actual SDK and the develop environments are great, cfx to work offline or the online builder, both are powerful and easy.
Regarding the differences that you ask, besides a few structure differences and of course Chrome or Firefox specific code that is not going to work in the other platform, I think that it should be easy port an addon from one platform to another, no automatic but pretty straightforward.

Complete WebBrowser Control On All OSes?

I want to create a new application (which I will sell) that uses web browser control to automatically post things on the internet etc.
I did some research, and it looks like the primary choice for most people is .NET webbrowser control (via an instance of IE).
I don't want to do this because I want customers that own a Mac and Linux to be able to use my software.
With that said, are there any web browser control classes or toolkits available that can work on all OSes (e.g. something that uses Java?)
Thanks in advance!
UPDATE:
Web browser control is basically the ability for a program to act like a human and open a web browser and go to websites, fill out forms, check email (lol) etc.
Firefox, Chrome, Safari. I think virutally everything but IE works on all the OS's. Not suprising really when you think it's made by microsoft.
Selenium libraries let you create scripts (with a GUI or one of the supported languages [it has got most of the popular ones like Java, Python etc.]) for browser automation on all popular browsers (including chrome, which works on all OSes like mentioned by other answers).

What are the technologies behind Quake Live?

What technologies are used to power Quake Live?
Specifically, how do you create a web application that makes such extensive use of 3D in the browser? The service requires you to download and install a plug-in in order to play. How do you create such a plug-in, and how does it interact with the web site?
Browser programs are very simply, programs. They are given an interface to interact with the browser, but beyond that, they can do anything a normal native application can do, like use DirectX or OpenGL.
Internet Explorer registers plugins using ActiveX. Firefox, Chrome, Safari and most other browsers use Netscape's NSPlugin API.
The MDC has plenty of documentation on writing plugins for Firefox.
There is also a question on SO about writing plugins for IE.

Recommendations for browser add-on tools to help with development [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
Can anyone suggest some good browser add-on tools/extensions to help with development?
I have firebug installed in Firefox which is great for dealing with CSS, HTML and javascript; any other suggestions?
Firebug
For Firefox:
Firebug is awesome for investigation and development.
Web Developer Toolbar is good also. Really helps with CSS and page layout stuff as well as much more.
I also use Live HTTP Headers (I think it is called, but it is on my work machine, so can't find the link now). Which has helped us out with caching issues and the like.
I do a lot of mobile phone development, so I also use UserAgent Switcher. Very helpful for pretending to be different mobile phones.
I tend to only use Firefox for development, and just test in other browsers as most do not have the extensive range of plugins to aid development that Firefox does.
Firefox:
Inspect This if you use the DOM Inspector at all
Measure It for telling you pixel distances (if you need that)
IE View or Safari View for ease of testing in other browsers
HTML Validator if you care about validation
Console2 to improve your js error console
The Javascript Shell bookmarklet is also handy (and look at the others there as well)
Edit: This is in addition to the Web Development Toolbar mentioned by others
The other must-have for Firefox is Chris Pederick's Web Developer Toolbar.
You should definitely install Safari. It has a number of tools built-in. I use it in combination with other browsers all the time.
Network Timeline
Error Console
Web Inspector
Snippet Editor
Plus it lets you set the user agent for your requests.
Consider this, it has a separate top-level menu called Develop.
Opera has:
Dragonfly (tools -> advanced -> developer tools)
Debug Menu
UserJS methods for intercepting things
opera:config#CompatMode%20Override for forcing quirks or standards mode
Web developer widgets
You can view source of files, edit them, apply changes and reload from cache.
In case of IE, next tools can be useful
Microsoft Developer Toolbar - dom|styles viewer
Fiddler HTTP Debugger - http monitor
Instant source - dom|styles viewer
Companion.JS - dom|styles viewer, extended error console
The "uber" extension for IE - "Developer Tools", provided as a part of IE8
Developer Console and DOM Snapshot for Opera:
http://dev.opera.com/tools/
Awesomeness is that these are bookmarklets implemented with JS. Suckiness is that they require the Internetz.
Firefox:
Inspect This if you use the DOM Inspector at all
Measure It for telling you pixel distances (if you need that)
IE View or Safari View for ease of testing in other browsers
HTML Validator if you care about validation
Console2 to improve your js error console
The Javascript Shell bookmarklet is also handy (and look at the others there as well)
This is in addition to the Web Development Toolbar mentioned by others
This list by Cebjyre is nearly complete (since FireBug was already mentioned in the question). I would only add Tamperdata. From time to time it is very useful.
Here's my development oriented add-ons for Firefox 3:
Web Developer
Firebug
Firecookie
FirePHP
Rainbow
TamperData
Poster
FireFTP
ReloadEvery
Selenium IDE
YSlow is a sweet Firebug addon for troubleshooting a page's load time.
Other than the excellent tools already mentioned, I find Charles to be extremely useful. Especially since I do alot of work with Flash Remoting which it handles excellently.
Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).
Charles can act as a man-in-the-middle for HTTP/SSL communication, enabling you to debug the content of your HTTPS sessions.
It's crossplatform, costs $50, but there's a "30 minute per session"-evaluation you can download.
Here's what I use:
Firefox:
DOM Inspector: I use this more than anything else for web development
Launchy: for opening sites in other browsers/apps
Tamper Data: this can be helpful for debugging GET/POST requests
Web Developer Toolbar: this has so many handy features for debugging: the W3C validation tools, built-in ruler, resizing tools, source manipulation, easy cache/css/script tools
IE:
Internet Explorer Developer Toolbar: nowhere near as handy as the Firefox one, but at least it gives you a decent DOM Inspector
Misc:
Jesse's handy bookmarklets: the shell bookmarklet is especially handy
I also install Safari and Opera, but mostly just use them for testing and benchmarking since their dev tools aren't as robust as Firefox, and they aren't as buggy as IE.
Lynx: I use this to make sure that any JS-heavy sites still work so that I'm sure they'll look OK to google, screen readers, and any other bot-like app.

Resources