List all media query breakpoints in a website - responsive-design

Is there a way to easily find out (through JavaScript, CSS or a browser plugin) the list of breakpoints a given web page has implemented?
Google Chrome currently shows breakpoints in responsive view, but I'm after getting them as a list.

Related

is there any design view in razor view engine?

I have to make a mvc application, But got stuck whether to use Razor or Aspx engine. I have made many web application in aspx, so razor is new to me.
I have not found any DESIGN View in Razor like we found in aspx ( design and source).
I have to make a .net application through which i can send sms through An android mobile connected via Usb to computer. Is there any code or api similar to send sms Like in Nokia Mobile AT Commands.
There isn't a traditional design view like there was for ASP. The closest thing you can get to it can be achieved in the steps below:
Get Visual Studio 2013
Install the Web Essentials 2013 extension
Open the Browser Link Dashboard from View > Other Windows
Press the View in Browser button
You should see Internet Explorer (or another browser) appear with your web application displayed. Also notice that browser now appears under the Connections group in the Browser Link Dashboard in Visual Studio. Go ahead and open the dropdown arrow next to the browser name. Select Design Mode
Return to the browser, you will now be able to select elements in the page and modify things like text. Your changes should be reflected in the respective cshtml file. You can also modify the css or underlying html of the page through the browser's developer tools (F12) and sync them back to Visual Studio
It isn't nearly as convenient as the old ASP style design mode, and can get cumbersome when you start involving layouts, partial views, editor templates, display templates, etc. But it's about as good as it gets when it comes to realtime editing of Razor pages.
There is no design view for creating Razor views.
If you are deciding between Razor or the ASPX view engine, I would highly recommend Razor.
No, theres no design view for Razor unfortunately. You have to run the app and use a browser to see changes to you page. If you do decide to go with WebForms id recommend looking at how to do the MVP pattern with it.

Some Text Does not appear untill i Inspect Element in google chrome

I developed an application on sitefinity(asp.net) when I ran it then some of it's elements like button text and labels are not loaded but when I inspect element it works properly.
This problem is just in Google chrome browser.
What could be a reason ???
Google Chrome Update problem or some designing problem in my application.
It happens with me too in chrome as sitefinity create cache for every page and some time we are not able to see changes due to cache.
When you are going to make any change please set "No caching" option for page from title and properties option and once you done changes and test all then again reset it for caching option.
If this is not the reason then we need to look into code that you have done.

Running Javascript Off a Webpage Through C#

I have a bunch of webpages where I need to grab some product information but the webpages are all written using javascript. So there will be something like
<a href="javascript:__getInfo('content_abc')">Product Name<a>
And once that's clicked all the page's content will change (but not the html address). How can I programmatically execute that script and get all the loaded content through a C# script?
While this is the wrong approach to your problem, there is a solution that might work.
By using automated testing tools, such as Selenium, it is possible to use the web driver interface to take control of a web browser and interact with elements on the screen, click buttons and check for results.

How to get CefSharp DevTools Element Selector's output in .NET C#?

I have Embeded CefSharp in my WinForms. Now I am trying to find a mechanism to somehow let user use Dev Tools' Element Selector ( without showing that builtin dev tools windows) and on user's click on element I want to get the HTML in my .NET code.
Can I do this and any help on how to ?
Thanks,
Khan
Hope I understood your requirements right; "you want to let the user see a highlight of the currently hovered element, then pick it by mouse-click"? Then I would take another route than hooking into the Dev Tools inspector feature.
I think it is easier to replicate it with a snippet of your own JavaScript like in this other question: highlight a DOM element on mouse over, like inspect does. There is even a JSFiddle demo of one of the suggested ways of coding it.
You then "only" need to detect which element the user clicks and send it to the .NET side.
See the CefSharp FAQ for help on calling between .NET and JS (or the opposite).
If the route you want to take for some reason really is to use the DevTools Inspector I would start to look at:
Some examples, with code, of integrations to DevTools and the API docs - but it doesn't look like the 'Inspector picker' is exposed
The Chromium DevTools .js and .css sources ... though, it seems I only found some kind of generated output

Chat with node.js always on top on all pages

I am building a person to person chat using node.js in a php website (using zf)
I am wondering how facebook (for example) is doing to always have the footbar visible even when navigating from pages to pages.
I first thought they used ajax everywhere so the page is never realy reloaded but it appears not as you can use the browser back/forward buttons to navigate (and I don't realy see any ajax call in my browser developper tools). So, my second thought is that all facebook is build with a kind of node.js alternative so everything works with js sockets ?
Any idea how to do a similar system, to have my chat windows always visible even when navigating my website?
Thanks
I am pretty sure they do not load actual page when you navigate within Facebook, but it is all JavaScript navigation that is available in newer browsers and documented at http://html5doctor.com/history-api/ or https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history. That is why you get this "smooth" experience and the chat remains on screen even though you are moving from one page to another, back and forward.

Resources