I have a PWA that saves data locally to indexedDb. Works fine. But I feel hampered by a lack of an editor like SSMS for SqlServer. To make a small change, I have to edit code.
I wondered if anyone had seen any tools (it looks like a chrome extension could do it) that might be useful? I'm working with Blazor (have a lot of Vue.js and Vanilla JS experience, but Blazor is just more productive).....so a component I could add to my application would be a major bonus!!
Prefer to avoid homebrew if someone has something already.
What do you mean by
so a component I could add to my application would be a major bonus
To inspect and make changes directly in the browser have a look at the Chrome DevTools.
Related
For example, we have a cool styled website, can we use developer options(f12) from browser to snatch this?
Ignoring any legal / copyright implications, you can grab the client-side code this way, yes. All HTML, CSS, JavaScript and imagery can be seen through the F12 Developer Tools.
However, there is no way to know what server-side code a website is using (outside of the server owner themselves configuring something incorrectly and thereby exposing that information).
The answer from Obsidian Age is a good one. I'm going to add some more information that may be useful to you.
I've used this technique myself of getting source code via the developer window. Usually I want to find out how they did some neat CSS or JS trick so that I can try it in my own apps.
The files that make up a website such as HTML, JavaScript, and CSS you can find in the Network tab and can easily copy these.
However you should know the JS, CSS, and even (sometimes to a degree) the HTML files have been minimized and are typically missing any comments from the original developers. Chrome has a nice feature that will un-compress JS files and you can even set break points and step through the JS code.
I just ran into a problem, While I was updating the js and css files for my website on a server, I do not see the immediate change. However, if I were to edit these files on a local computer or go on incognito mode on chrome, I see the change right away.
let's say I have:
div{width:100px}
after I change it to div{width:200px}, when I pop open the developer tool, it still reads div{width:100px}.
I feel like I need to clear something for the broswer, any explanation for this?
Check the caching headers you are using for static resources. The browser is likely using a cached version.
I'm diving into the world of Chrome Extension development, primarily because there is a very small feature that is missing in Chrome that I miss dearly. The context-menu option to "Set as background/wallpaper" like that found in Firefox. Sounds trivial, but it's convenient.
I have most of the "basic" stuff worked out with the manifest file, am able to install it, even managed to get it to show up as a context menu item.
The problem obviously is that I am wanting to mess with a user's OS-level settings which is extremely difficult because of security issues (fully understand this).
I found an extension that allowed this in older versions of Chrome, and it looked like the developer used some type of .dll and C++ to accomplish this.
I'm not really sure how to make this work.
Since that Chrome doesn't allow these kind of manipulations (such as your PC's settings), you will need to create a native application that will run beside your extension. When the user chooses the image from your extension and selects "use as wallpaper", you will use the native messaging API to send a message to your desktop application, that will set the wallpaper (and do whatever else you can't do within a chrome extension) for you.
You can use the chrome.wallpaper app api to set the wallpaper after using the messaging api to send the image from your extension.
So if you are any sort of clg fan, you'll occasionally visit azubu.tv to watch them. If you go into the chat, using chrome, you can't change your text color. The reason is in line 689 of the chat js. (it's best to pop it out since it's in an iframe). There is an extra = in the comparison that works in firefox but not chrome.
I did not code this site. However, is there anyway to use a chrome plugin to permafix that function? I've already sent out a code update request to the admin -- a month ago. I've been just opening up the javascript console to do it manually but I'd like to help others.
I isn't expected people to develop extensions (or plugins) to fix web pages' .js, because it would take a lot of effort in reverse engineering and development, and the extension will become obsolete as soon the server administrator fixes his own js.
Extensions can do it, but are a very odd way to do that.
I don't know who voted you down without a comment; it's not the way we used to do it here.
I'm tyring to get phonegap up and running on blackberry storm (9530 simulator). I had been testing my webapp from withing BB's built in browser, and it was looking ok, but then it totally bit once I tried to look at the some code from within phonegap, even though I was pointing phonegap to the same url (I hadn't yet gotten to the point of running code locally on the device).
I tried a test case on google and got similiar results. see below. I suspect that I'm missing something basic here. I would have expect both images to be nearly identical.
Browser
http://www.eleganttechnologies.com/outside/ImgDeviceBB9530WebGoogle.jpg
Phonegap
http://www.eleganttechnologies.com/outside/ImgDeviceBB9530PgGoogle.jpg
[Update]
To shed some light on what is happening, I ran the browser and the embedded browser (phonegap) against the W3 mobile web acid test: http://www.w3.org/2008/06/mobile-test/
I definitely notice differences between the two, but I don't yet know the 'why' and the 'how-to-address'.
Acid via built-in browser
(source: eleganttechnologies.com)
BTW - I ran this earlier today and got a couple more green square than just now.
Acid via browser embedded into phonegap
http://www.eleganttechnologies.com/outside/ImgDeviceBb9530PgAcid.jpg
Disclaimer: I don't know anything about phonegap, but have a pretty good theory. By default the embedded browser control on BlackBerry uses an older version of the rendering engine than the BlackBerry browser itself does.
At the BlackBerry developer conference last year, a talk was given about this, and there's an undocumented option to use the newer rendering engine. \
The option ID is 17000 (yes, a magic number, which could change, use at your own risk etc), and should be set to true. Not sure how you'd pass this option through phonegap (I'm not familiar with the toolkit) but using the BlackBerry APIs it's something like:
BrowserContent content;
...
content.getRenderingOptions().setProperty(RenderingOptions.CORE_OPTIONS_GUID, 17000, true);
I don't know the specifics of the browsers you are using, but I do know that most of the big sites will detect your OS + browser combination to decide what HTML to show you.
If Google is seeing a different user agent, you might get a generic mobile version of the HTML instead os the Blackberry specific HTML you get for the built in browser.
If you have access to a web server, try hitting it with both browser setups and see if there is any difference in the log file. That might tell you something interesting.
As we can see in your Acid tests...
One browser (the built-in one) is reporting correctly as a BlackBerry9530, and the other (phonegap) is not presenting the user-agent ["Testing with ."].
In this case, Google is providing you with the default view of their homepage, whereas when you are reporting yourself as a BlackBerry device, you will get the BlackBerry specific rendering.
By the sounds of things, using phonegap is removing the default user-agent (most probably because it's not recognising your device). As phonegap is open-source, the best bet is to get in there, and debug it and find out what happens with the user-agent when the http requests leave the device and track it back from there.
Maybe one browser has capabilities that another one does not?
Hm. By looking at the screenshot I would say that the second page is probably missing some resources. It may be missing some images, scripts and the CSS files, which would explain different l&f. Knowing how Blackberry Browser Field API works, I would guess that the implementation that uses the BrowserField was not done correctly. Just my guess. In addition to that, when the browser field is initialized the caller needs to configure it properly by enabling the appropriate browser features - scripts, styles etc. Again, the API is done in a very weird way, I have gotten myself into this trap once. When setting the options, you cannot just create one mask (like CSS | WML | SCRIPT) and make one call. Options are numeric and, I believe, non-overlapping - but you still need to call the API for setting each option independently.
Also the way asynchronous loading of the resources for BrowserField takes time to understand.
Just my $0.02.